Top nav opacity


Pulling my hair out here trying to find where to change the top nav area ( .site-header.float-header??) and set opacity to a solid colour.

Any hints??



please try the following code in a custom css plugin or child theme:

.site-header, .site-header.float-header {
  background-color: #ff0000;

If you want the solid color only after scrolling apply this code:

.site-header.float-header {
  background-color: #ff0000;

When this doesn’t work, you can also try adding !important to the code, e.g. background-color: #ff0000 !important;

Best regards,

I am having the same issue and have added these Custom css codes but it has no effect. However, the strange thing is when I use firebug in firefox to change the site header color it works, but when I add the code to the style, noting happens


do you have a child theme or are you using a plugin?
Did you tried to apply !important?
Do other changes with css code work?

I am using a child theme. Here is my site. I added the code !important and it seems there no change works with other css code.

I am using a child theme. Here is my site. I added the code !important and it seems there is no change when i add other Css codes

Are you using Sydney? It didn’t seem to me.

Sorry I gave you the wrong link. It is

Hello again,

sorry for the massive delay – I’m working the whole day.

I didn’t see any css code for the site-header in your child themes style.css. Did you removed it? Do you have the child theme active?

Also I took a look at my previous post with the code again and saw that I made a big mistake. Instead of color: #aaa; it has to be background-color: #aaa;of course.
Please take a look at my code in previous post – it should work now.

@Jem71: Did you solved the problem? There aren’t any answers from you.

Best regards,


Thanks for that, the background-color works for me.

Why do I also get a dark top nav color for smaller size screens ( tablets). Where is this found?

You’re welcome, great that it worked.

I guess what you’re meaning is the default theme behaviour. On smaller screens the navigation is positioned outsite of the slider that the mobile-button is visible even on white images.

I need some minutes to be at home, I will try to find something for you.

Please try the following code:

@media only sceen and (max-width: 991px) {
  .site-header {
    background-color: #abc !important;

Choose the color you want.