Make transparent header have a black background after scroll

[444media]

Right now on my site the header is transparent, but after scrolling down it switches to a white background. I’d like it to be a black background. I looked up how to change the background of the header and used this CSS:

@media(max-width: 979px){
.x-navbar, .x-navbar .sub-menu {
background-color: black !important;
}
}

I placed this in the CSS section under theme options (not on the page itself). It seemed to work when viewing the page on mobile, but not on desktop. I have cleared the cache too.

Thanks for your help,

Chris

[friech]

Hi Chris,

Thank you for writing, that CSS code you shown only trigger on-screen 979px and below that’s why. You need to remove this: @media(max-width: 979px){ and its corresponding closing bracket }

More details about CSS Media Query Here.

Cheers!

[444media]

Hey Friech,

OK…did that and now the header is black…HOWEVER, I want it to only be black after scrolling. I’d like it to be transparent when user is at top of the page, before scrolling. Then when scrolls back to top it’ll go back to transparent. How do I do that. After removing what you said, this is what I have now in Global CSS:

.x-navbar, .x-navbar .sub-menu {
background-color: black !important;
}
}

Thanks for your help Friech!

[christian]

Hey @444media,

When the x-navbar gets fixed, another class is added to the markup and that is x-navbar-fixed-top. That is the one you need to target like:

.x-navbar-fixed-top {
  background-color: black;
}

You can use that class to target child elements in the Navbar when it’s fixed.

Please just note that I have shown a code example because this is just a minor cosmetic change and it shows a technical aspect of our theme. Custom coding in general is outside the scope of our support. That means we will not fix issues arising from custom code nor enhancing the samples we provide.

Hope that helps.

[444media]

Got it! Thanks so much for the info and your help!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.