Header is still transparent after scrolling down only on internal pages

[444media]

I am having an issue with the sticky/fixed header on my site remaining transparent after scrolling down the page, but only on internal pages. I want the header to be transparent on the home page BEFORE one scrolls down. And then when you do scroll down on the home page, the header is then NOT transparent…this is how I want it to work. Works fine on home page.

BUT, on the internal pages (only two right now that scroll down) the header is sticky/fixed and when I scroll down it remains transparent. So the content on the page can be seen behind the header and menu, as opposed to switching to a solid color after scrolling starts.

lauchtechholdings.com (works fine on home page)

http://launchtechholdings.com/team/ (here you will see that the header remains transparent after scrolling down)

Thanks,

Chris

[lely]

Hi Chris,

It works that way because you have added the custom CSS for color changes on homepage > content CSS.
Content CSS are page level CSS. That means it will only work on homepage. If you want for that CSS to work on other pages too, please add it in Theme Options > Global CSS

Another note, you might need to change white background on other pages so it will be visible. Look at this: https://screencast-o-matic.com/watch/cYeZ6XytEM

Hope this helps.

[444media]

Ah yes! My bad…I should have known that as I’ve saved this code from other sites.

And yes, I do need to change the BG…I know. I have another ticket open (haven’t seen yet the response) as I used some CSS to change it to black, but is not working. I used:

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

But it seemed to only work on mobile for some reason. But we’ll see if that ticket was addressed…I’m sure it has been. Just looked at this one first.

Thank you Lely!

[444media]

Friech helped me by telling me to remove the first line of the CSS

But now header is always black. How do I make it black only after scrolling down, and transparent when at the top of the page. I’ve done it before, but can’t find the CSS used and can’t recall what to add to this.

Thanks

[lely]

Hi @444media,

It is always black because of CSS specificity plus you are using the same selector.

See this: https://screencast-o-matic.com/watch/cYeT2vyBv3

This class x-navbar-fixed-top was added on the navbar when it is scroll down. You should add it as part of the selector. Check my screencast to see which CSS to adjust.

Hope this helps.

[444media]

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

[ruenel]

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