Change Navbar color

[trent_nguyen]

Hello everyone,

I'm trying to change the default color of the navbar to black but when I edit the _theme.less file to change the nav bacckground to #000000 nothing occurs. I flushed the cached, deleted the static and redeployed but no change has occurred.

[shashank_bhatt]

Magento sets the background color of navigation bar with _navigation.less file in magento ui 
library which sets the value of background color through less variables.
To change the background color of navigation bar, you have to edit the value of two variables inside your _theme.less at theme level.

//navbar color in desktop devices
@navigation-desktop__background: #000;

//navbar color for all devices
@navigation__background: #000;

Set those variables and override them in your _theme.less with value which suits to your theme.

[trent_nguyen]

I've added those values to my web/css/_theme.less and redeployed but it doesn't seem to work. Cache has been cleared and flushed too

[shashank_bhatt]

Have you created source directory inside css directory?

Full path to _theme.less is like below.

app\design\frontend\Vendor\theme\web\css\source\_theme.less

If your theme is child theme of certain theme, make sure you first copy this file from parent theme with same location and then modify parent theme variables or modify global variables.