I've figured out how to change background color in navigation menu by changing values from the navigation UI library (LESS file). Now I want to add top and bottom borders to this menu, how can I achieve that? Is it possible to add a new property like "border-top-style" (or any other) to the navigation styles? and how it is done?
1 Answer
You can extend or overwrite the _navigation.less
file. (you can find this in vendor > magento > theme-frontend-blank > web > css > source
)
If you want to just change a few elements from this file, create a _navigation_extend.less
file in your themes web > css > source
file and add your styles in there. If you want to overwrite it entirely, don't add _extend
to the end of the file name.
You will need to import this file into your _extend.less
file using @import '_navigation_extend.less';
or @import '_navigation.less';
so that your changes are included in your theme.
Hope that helps!
-
I've already made some changes to navigation menu extending existing variables/properties from the
navigation.less
file but I dont know yet how to add new properties (border-top-style) to the navigation menu. Apr 16, 2016 at 18:19 -
I'm pretty sure you've answered your own question here: magento.stackexchange.com/questions/106569/… Unless I'm missing something? Apr 22, 2016 at 10:02
-
I dont know yet how to add new properties (border-top-style) to the navigation menu. I know the code should be in the
_navigation_extend.less
file but I have not identified where the border-top-style property is defined, so I can change/extend it. Apr 22, 2016 at 14:54 -
What is your parent theme? I haven't seen a
border-top-style
variable yet, the only ones I've come across so far are:border-color__base, border-width__base, hr__border-color, hr__border-style, hr__border-width
.These were in the_typography.less
file inlib > variables
. If it's a new property I'd create your own variable / add it into your_navigation_extend.less
file. I've added my navigation border to my_navigation_extend.less
file like so:.navigation { border-bottom: @border-width__base solid @color-black; }
Maybe it's not the right way but it works for me. Apr 22, 2016 at 15:50 -
Parent theme is Blank. In
navigation.less
(line 11) there is a@navigation__border: ' '
variable. In my_navigation_extend.less
set it to@navigation__border: 3px solid blue;
but it does not work. I'll try the way you did it. Thanks Apr 22, 2016 at 16:46