t’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.

Getting started

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 placingheight: 100vh;into the style text box for the Cornerstone section, it will fill the whole screen on all devices!