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?
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:
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.
The way I add styles that are not included in the basic .less files is to add them using regular css.
Add into the header for: magento/app/design/frontend/Company_name/theme_name/Magento_Theme/layout/default.xml
<head>
<css src="Magento_Theme::css/css_file_name.css"/>
</head>
And then add your styles into the file at: magento/app/design/frontend/Company_name/theme_name/Magento_Theme/web/css_file_name.css
In your case, it could be:
.navigation li.ui-menu-item a {
padding: 5px;
}
