Add transition to navbar on scroll

[bartenderonduty]

Hi Themeco Team,

I am attempting to add an effect where the navbar goes from transparent to opaque on scroll, like in this article: https://theme.co/apex/forums/topic/transparent-navbar-to-opaque-on-scroll. The issue I’m running into is that there is no fade in/out transition on the navbar with the CSS in that support request, which looks a little unusual.

Can you suggest some CSS or JS that would allow the navbar to fade between transparent and opaque on scroll?

Thank you!

[christian]

Hey @bartenderonduty,

Use the CSS Transition Property. See https://www.w3schools.com/css/css3_transitions.asp

The code would look like this.

Please learn about the Transition property so you could customize it according to your needs.

Hope that helps.