Fully transparent header convert to semi-transparent header on scroll down

Question

Hello, I'd like to use a fully transparent header that converts to semi transparent header when scrolling down. Can you provide the CSS changes required? Thanks you.

SemiColonWeb · Accepted Answer

Hello,

This is Definitely Possible. Simply add the data-sticky-class="semi-transparent" Attribute to the #header Tag.

Then add the following CSS Code:

#header.dark.sticky-header.transparent-header #header-wrap:not(.not-dark) { background-color: rgba(0,0,0,0.6); }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

David · Answer

Thank you very much! One last thing for now... how can I make the header stay at the top of the screen on mobile displays?

Semicolon Web · Answer

Hello, You can simply add the .sticky responsive menu Class to the <body> Tag. This will definitely work fine. Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.

David · Answer

Works like a charm! Thank again.