How Can I override vendor/magento/magento2-base/lib/web/css/source/lib/_navigation.less file in my custom theme ?


4 Answers 4


You can try with


Read more: How to override gallery.css


1) You have to copy _navigation.less from your parent theme to app\design\frontend\vendor\theme\web\css\source(your custom theme) and override your css after .lib-main-navigation(); and .lib-main-navigation-desktop(); this lib navigation style.


2) you can override navigation variable's value in custom theme's _theme.less,

you can find variable name at lib\web\css\source\lib\variables


In addition to Khoa TruongDinh's and Dipesh Rangani's answers, Khoa TruongDinh's overriding path is ok but in order to prevent magento overriding your custom styles, your custom styles, have to be added after the .lib-main-navigation(); and .lib-main-navigation-desktop(); as Dipesh Rangani mentioned so then in you custom theme's _navigation;less file you will have:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {


     Your custom code here

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {


    Your custom code here

This was extremely helpful, I was copying the lib file and editing within the .lib-main-navigation-desktop() class which was getting overwritten, now if I load this mixin first and put my styles after they overwrite

Your Answer

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

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