Transparent Fixed Header (Opaque on Scroll)

X Theme and Pro Theme10 Comments

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.

Getting started

header
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

Afterwards, place this in your custom javascript section in the 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.

10
Leave a Reply

avatar
  Subscribe  
Notify of
Kyle Bailey
Kyle Bailey

Fantastic resource guys! Love the detailed explanations and clear and concise articles. With transparent headers I find that I run into two regular problems and was wondering if this script can be changed to address that issue? What I find happens is that the hero image used across the site on various pages may be light or dark. Depending on this fact the selected color for nav elements and the logo sometimes gets lots. What I’d love is an easy way to adapt the general colors used in your script so that I can add another class to the #heroimage… Read more »

Cody
Cody

Hey, I’m trying to follow this tutorial using Icon stack and it is having the inverse effect of what is intended. The menu is opaque at the top but turns transparent when I scroll.

Michael Bourne

Hey Cody, I just put this exact code up on a dev site using Icon and it worked flawlessly. I’m guessing there’s a conflict somewhere on your page. if you post a link to the page where it’s saved, I’ll take a look and let you know what I can figure out.

Cody
Cody

It seems the issue was the “navbar height” property in customizer. I had mine set to 70px but when I left it blank your code worked fine on my front page. However removing the defined navbar height created problems on any pages that don’t have a #heroimage section. I’m going to have to tinker with it for a while.

Michael Bourne

Not sure why the height would affect a simple background color change, but your comment did inspire me to tweak the javascript in the post. Try the new code above and let me know how it works for you.

Larry
Larry

Can someone past an example link of their website with this working on it.

Antony
Antony

Great tutorial. Do you know if there is a way to do this in XPro, either in the header builder or using CSS and JavaScript as above please? Thanks guys!

Blake

We still couldn’t get it to work on our site. You’d think with a theme as big as X-Theme it’d be easy