Magento 2 How to override vendor/magento/magento2-base/lib/web/css/source/lib/_navigation.less?

Question

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

Answer 1

You can try with

app/design/frontend/{Vendor}/{Theme}/web/css/source/lib/_navigation.less

Read more: How to override gallery.css

Answer 2

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.

OR

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

_navigation.less

Answer 3

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) {

     .lib-main-navigation();

     Your custom code here
}


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

    .lib-main-navigation-desktop();

    Your custom code here
}

Answer 4

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