1

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?

Improve this question

1 Answer 1

Reset to default
4

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!

Improve this answer
5
  • 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.
    – Luis Garcia
    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?
    – knarfeolhc
    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.
    – Luis Garcia
    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 in lib > 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.
    – knarfeolhc
    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
    – Luis Garcia
    Apr 22, 2016 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.