Magento – Change CSS for navigation bar

csslessmagento2navigation

I'm using the Luma theme. I would like to change the padding for the a-tag tag used in the navigation submenu. I can change the backgroundcolor of the items (li) like this,

@navigation-desktop-level0-item__active__color: @navigation-desktop-level0-item__color;,

but not the padding of the a-tag within the li-tag. Can anyone help me?

Best Answer

Use the developer tools of Chrome to identify the CSS you want to change. Using the map files generated, you should be able to use to identify the LESS code causing the problem.

Source maps should be automatically generated when using grunt. Consult the front-end dev docs on how to setup grunt.

There you might either find a configuration variable you just have to change or you have two options:

  1. Copy the .less file to your theme and adapt it
  2. Add own LESS code in your theme with a more specific CSS selector to overwrite the core CSS/LESS.

I currently use option 1. Because it keeps the LESS code more structured. The downside is that it is necessary to copy and maintain core code. I first commit the unmodified copy of the .less file to git, to later track my own changes.

Related Topic