Changing the sticky header from Black to White And updating Menu text to Black

I have found the code below to change the header color from black to white - but either I added it in the wrong place or it isnt working

.site-header.float-header {
color: #FFF;
}

I added it by adding the plugin custom css editor and adding that line, but no love. But then I also realize that if I change the sticky header to white then the menu will be invisible so I need to change that to black.

Any help will be super appreciated!

Hi!
I have the same problem… I want to change the header black colour to transparent because my picture is too dark now… Can you help me with this, please?

Hi all,

Here is the CSS code to make the background color of the header menu bar when the page is scrolled:

  • white transparent
.site-header.float-header {
    background-color: rgba(255, 255, 255, 0.6);
}

black transparent

.site-header.float-header {
    background-color: rgba(0,0,0, 0.6);
}

Make sure you are using sticky menu as your menu style.

Regards,
Awan

Thanks Awan for your help!

I have another question. I have a header image but in original layout, it’s behind dark background. (you can see it on my website: www.musicplayground.eu). Can I remove this? I want original image in the header.

Thanks,
Monika

Hi,

I’ve checked your site, and here is the CSS code to remove the overlay background:

.header-image::after {
    background-color: transparent;
}

By the way, I noticed that your site are using Astrid theme?
For further, please post your issue in related theme.

Regards,
Awan