Change background colour of the Main Menu

Kersten · January 2017

Hello,
i would like to change the background colour of the complete "Main Menu", but can`t find under the betheme options?!.
I use the "Stack:Center" Header full width. Is it possible to change it?

I found an answer in another discussion, to change it over the Custom CSS, but with that CSS-Code the colour changed only on the lefft and rigth side of the nav-menu container, but not behind the nav-menue itself ... can you help me please?
Best regards

Albert · January 2017

Hi,

menu background color can be changed under Theme options > Colors > Header section. This option is called Top Bar Left background.

Kersten · January 2017

Hi,
thanks for the quick answer ... :-)

but that does not solve my problem unfortaunately,
because when i change the colour there, the whole header background colour (full width) changed - so also behind the centered logo and not only behind the main menu.

Problem is: my logo is smaller than the full width header and there i need a white background while the menu background schould be grey.

How can i separate that: 1.) background colour header 2.) background colour main menu?

Thank you in advanvce

Albert · January 2017

So please send us link to page where you would like to change just menu background and we will see if it's possible.

Kersten · January 2017

Here is the link:

http://fs-fashionandstyle.com/

Albert · January 2017

Ok, thanks. So to change just menu background, you need to use the following css:

#Top_bar .menu_wrapper { 
    background: #000 !important; 
}
#Top_bar:not(.is-sticky) #menu { 
    background: transparent !important; 
}
.header-stack.header-center #Top_bar:not(.is-sticky) .menu_wrapper {
    margin-left: -10%;
    width: 120%;
}

Kersten · January 2017

Oh perfect - that is the solution :-)

... thank you so much!

Best regards

Albert · January 2017

You are welcome!

manamedia · February 2017

Is it possible to make the background stretch the length of the header area? The above fixed my issue of the background to the menu being transparent, but only covers the menu area. I am using "boxed" in my settings.

manamedia · February 2017

The menu background (on scroll) disappears if I have the Top Right Bar turned to Hide=Off if that helps any.

Albert · February 2017

@manamedia Ok, thanks for explanation!

carobrowna · August 2018

Hi!

My main menu is transparent. I would like for it to be white.

If I change the colour to white in Theme options > Colors > Header section >Top Bar Left background. it is still transparent.

The website is http://wordpress.bosquesdezapallar.cl/

Thank you!

Pablo · August 2018

Hi,

Be sure that your header style is not transparent in

Theme Options > Header & Subheader > Header,

Also, check if Minimalist (in this same location) is set to OFF

Untick the transparent option in Theme Options > Global > General

http://prntscr.com/klifr5

Thanks

carobrowna · August 2018

Hi Pablo! Thanks for your answer.

Transparent option is off in Theme Options > Global > General

Theme Options > Header & Subheader > Header : Minimalist is set to OFF

My header style is Classic.

The problem persists. Anything else you could think of?

Pablo · August 2018

Hi,

http://prntscr.com/klx3jf

Are we talking about 1 or 2?

If 2)

It's already white, but a little bit transparent, We can change it with CSS.

1) It's not possible, you have to decrease elements of your menu.

If I place a color on it, it will look like this

http://prntscr.com/klx4b5

It's not possible to make it full width.

Thanks

carobrowna · August 2018

Hi Pablo!

Thanks again for taking the time.

What I would like is for Nº 1 to also be white, because when you scroll is difficult to read the menu items

How can we change it with CSS?

Pablo · August 2018

Hi,

Paste it into Theme Options > Custom CSS

#Top_bar, .top_bar_left{
	background:white !important;
}

I cannot change it to be full width.
Thanks.

Change background colour of the Main Menu

Comments