Magazine Header - Different Background Colours

naumanjavid · July 2019

Hi there,

I have the Magazine Header enabled on my website. With the header having two sections, where the top is the logo on the left and caption on the right, and then the menu below it, I want to customize them both differently.

That is, I want the top (with the logo and caption) to have a white background, while the bottom (actual menu) has a grey background. When I try to change the background colour right now, it changes both of them together, but I want to control them individually.

Can you please let me know how I can do this? Thanks in advance!

Pablo · July 2019

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

naumanjavid · July 2019

Hey Pablo,

Here is the link to my site (which is not fully live, but is on a demo site from Flywheel):

URL: naumansite.flywheelsites.com
Username: thesignnetwork

Password: thesignnetwork

Here's what I'm talking about:

- I currently have the Magazine header, which has two parts (the top being the logo and banner, while the bottom is the menu itself)

- I wish to make the menu, and not the logo and banner section, have a background grey colour

1. This is how it currently looks

https://snag.gy/G15lWP.jpg

2. This is how I want it to look (the part highlighted in yellow is the menu, which I want to have a different background colour)

https://snag.gy/Og8oQp.jpg

Thank you!

Pablo · July 2019

Unfortunately, that's not possible

HTML structure does not allow do to it - to change that you would have to edit theme files which we do not support.

I can change the background color only of menu or whole header, see screen:

http://prntscr.com/oc4q9h

Thanks

naumanjavid · July 2019

Yes please - I would only like to change the colour of the menu only (like shown in your screenshot)!

Can you please tell me how to go about it?

Pablo · July 2019

Please paste that code into the Theme Options > Custom CSS & JS > CSS

.menu_wrapper{
	background:green !important;
}

Thanks

naumanjavid · July 2019

You're amazing!

Apologies for asking, but is there a way to make the background colour extend for the entire width? So it would be grey for the entire width, and not just where the menu items are itself?

https://snag.gy/fSiAWy.jpg

Pablo · July 2019

As I told before, that's not possible.

I showed you which elements I can catch and nothing more.

Thanks

Magazine Header - Different Background Colours

Comments