It’s not uncommon to see X users make their navbar transparent, but what about a transparent fixed header that stays transparent while passing over your hero image and turns to opaque for the remainder of the page? As it turns out, it’s not hard to achieve. We just need to use a little bit of custom CSS and jQuery.
X Theme version < 5 specific. This will not work on newer releases of the themes.
To begin this specific example, we will be using an inline header layout. In the customizer, we have set the navbar background to transparent and the link colours to white. If you are using the Integrity stack, you can also choose to have a transparent navbar in the customizer, but I’ve included the proper CSS below to cover the others.
In Cornerstone, we make our first section and give it an ID of #heroimage. Make it into a hero image by setting a background image and setting the height as we see fit. Try placing
height: 100vh; into the style text box for the Cornerstone section, it will fill the whole screen on all devices!
Next we use the following custom CSS in our Customizer
That code is going to find the height of your hero image, and apply a class of “pasthero” to the navbar after the user has scrolled passed that point. The CSS transition above makes it look smooth. As always, the code can be edited and tweaked to your liking. I have edited it to look for the hero image section right away, and if it’s not present, add the opaque class to the navbar. Thanks to Cody for the inspiration.