Header image overlay darker in menu only


I am wondering how I can change the opacity of the dark overlay on top of the header image but on the top menu bar only. I want that part darker so you don’t get the menu text mixed with the image below.

Is there any way I can do that?

Hello JGordinho94,

Can you please provide a link to your website?

Kind Regards, Roman.

Yes, of course. Forgot that.


Thank you for the link. Please try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up).

header#masthead.site-header.has-header:not(.header-scrolled) {
    background-color: rgba(0,0,0,0.6);

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

It works just like I wanted it to! Thank you!

Great! You are welcome JGordinho94 :slight_smile:

Kind Regards, Roman.


I have a similar query with my website (www.theequinox.com.au). I’m not sure what you meant for “for the top menu bar only” I don’t want to remove the black overlay colour entirely but I just want it to be a bit lighter & clearer. Is this the code I should use or will this do something different to what I want?

Hello LokyGordon,

Please check the link that JGordinho94 mentioned above and decide whether it’s something that you want to achieve.

Kind Regards, Roman.

Hi Roman

I am looking for a similar function but not the color behind the top menu but I want to lighten the black overlay below the top menu above the post content. Currently it’s a black overlay which lets just a little bit of the background image through.

Can you share that code?



Hello Jeff,

Please create a new topic for your issue to keep forum in good order and make it easier to help you.

Kind Regards, Roman.