This solution allows you to create a full-width header, have it fixed to the top of your page, and have it fade in and out when a user scrolls on your landing page. This is a great way to hold off on showing your header/navigation until you feel it is needed. This can help create a clean, uncluttered look for your pages. This solution builds on Johnny’s ‘Sticky Header’ Community post.
WARNING: YOU ARE ENTERING DEVELOPER TERRITORY
Create a box element in the editor for your fixed header and style it to your liking.
Replace “#lp-pom-box-53” with the ID of your box from Step 1.
Set the value of the ÒshowHeightÓ variable. This is the height (in pixels) where the Fixed Header will fade in. The larger the value, the more visitors will have to scroll before the Fixed Header fades in.
Paste the fading_fixed_header.css code into your Stylesheets section.
Replace both instances of Ò#lp-pom-box-53Ó with the ID of your box from Step 1.
Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.
We would love to see how you implement this on your own pages. This is your chance to get creative and show the Unbounce community how you’re using this.
Did you find this tip useful? Did you test this on your landing page? Let us know in the comments below!