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?
2 Answers 2
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:
- Copy the .less file to your theme and adapt it
- 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.
-
Can you tell him where to put the sourcemap configuration. All that was mentioned on this was to use source map. They need first to be generated. Be sure not to add them to git repository because then production will have them as well.camdixon– camdixon2016年07月03日 15:26:08 +00:00Commented Jul 3, 2016 at 15:26
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;
}
-
But then you give up all the powers of LESSAlex– Alex2016年07月03日 13:11:32 +00:00Commented Jul 3, 2016 at 13:11