Change background color on default menu bar

[administrac390]

Hello, I'm new to Magento and trying to figure out how I can change the background color of the top menu bar. The default is light grey an i want to make it purple. Tried a lot of things i found on the web, but nothing seems to work. At this moment I have created a new theme that extends the basic blank theme from Magento. Tried to override the background color using _theme.less located in the ./css/source directory of my theme, but nothing happens!

Somebody who can help me out on this?

[Nishu Jindal]

Hi @administrac390 ,

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

Full path to _theme.less is like below.

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

After changes, redeploy content and flush cache.

Problem solved! Click kudos & Accept as solution.

[Bhanu Periwal · Accepted solution]

Hi @administrac390 

Kindly refer below link :

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css-preprocess.html

It will help you to add css with less file. Please fun "php bin/magento setup:static-content:deploy " after add changes with less file.

If issue resolve, please click on 'Kudos' & Accept as Solution!

[administrac390]

Thank you! This was what I was looking for. Solved this problem.

Now I have one more question. Which file contains the color variables? In a sample is saw they set colors like this: 

@navigation__background: @color-gray40;

In my opinion, just getting started with .less as well, this is a very nice way to define your colors instead of the "css"-way where you have to define numbers for every item. For now I set the color variable in my _styles.less file, but would be nice if my color styles could be placed in a file that extends the original file containing the variables.