[Tips & Scripts] Creating a Fixed Header/Footer (aka Sticky Header)

Johnny_Opao
Userlevel 3

:spinbounce: Update:

We have now officially launched Sticky Bars natively within the Unbounce Builder! Click here to start using Sticky Bars on all your Unbounce landing pages! 🙂

 

tips-scripts-banner

 

Hey Everyone!

Just wanted to share a solution to those looking for a fixed header menu. This type of fixed header stretches from side to side but keeps the content/menu elements centered within your page.

Check out this example page, built in Unbounce:
http://unbouncepages.com/supercoolfixedheader/

fixed header unbounce

How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Instructions

First drop a ‘box’ widget near the top of your page section. Give it the appropriate height and drag out the width to touch side to side of your page guides. Apply your intended styling to it’s background properties.

Next drop in any other widgets or content within the box. Make sure everything is positioned and kept within the borders of your page guides.

Once you have your header menu designed, you will want to install the latest version of jQuery in the head. For instructions on how to install jQuery please check out our documentation here, https://documentation.unbounce.com/hc/en-us/articles/360035109311

 

Afterwards, copy the script below to your ‘Javascripts’ box (set placement to ‘before body end tag’).

<script>

  //Fixed Menu (Header or footer) v1.3.1

  /**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
    * TS:0002-13-013
  */

  //Replace ID below with your own box ID
  var boxToAppend = '#lp-pom-box-177';

  //Set to 'header' or 'footer'
  var headerOrFooter = 'header';

  var backgroundCSS = {"position":"fixed", "left":"0", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"899"};
  var colorOverlayCSS = {"position":"fixed", "left":"0", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"auto", "border-style":"none none none none"};
  var childrenCSS = {"position":"fixed", "left":"auto", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"999", "border-style":"none none none none", "border-width":"0px", "background":"none"};

  if (headerOrFooter === 'footer') {
    backgroundCSS["top"] = 'auto';
    backgroundCSS["bottom"] = '0px';
    colorOverlayCSS["top"] = 'auto';
    colorOverlayCSS["bottom"] = '0px';
    childrenCSS["top"] = 'auto';
    childrenCSS["bottom"] = '0px';
  }

  var boxParent = jQuery(boxToAppend).parent();
  var boxClone = jQuery(boxToAppend).clone()

  boxClone.appendTo(boxParent).css(backgroundCSS).children().remove();
  jQuery(boxToAppend).css(childrenCSS);
  jQuery(boxToAppend + '-color-overlay').appendTo(boxClone).css(colorOverlayCSS);

</script>

Replace the box ID with your own boxes ID:

You can find your boxes ID by clicking on the box and referring to the bottom of the ‘Properties’ menu.

That’s about it! Now hit preview and see your results.

 

 

Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

156 replies

Nayon
Userlevel 2
Badge +1

I just didn’t want it to stick to the footer @Noah ! I also wanted it to appear after a particular scrolling is made on the page.
But it’s all figured out now! Thanks to @silvia for the code and help.

Victor_Adascalitei

Hello everyone,

Just an update on this script for a sticky header after scrolling down.

If you want to make it look more natural using a smooth transition instead of suddenly showing or hiding it, you can replace .show( ) and .hide( ) with .fadeIn( ) and .fadeOut( )

Here is what I used to make my sticky header show smoothly when the user scrolls down to the 2nd section of my landing page:

//Replace ID below with your own box ID
var boxToFix = ‘#lp-pom-box-609’;

//Replace 575 below with your own
var scrollPositionToShowHeader = 575;

var boxParent = (boxToFix).parent(); var boxClone = (boxToFix).clone();

$(boxClone).appendTo(boxParent).css({“position”:“fixed”, “left”:“0”, “top”:“0”, “width”:“100%”, “z-index”:“899”}).children().remove();

$(boxToFix).css({“position”:“fixed”, “left”:“auto”, “top”:“0px”, “width”:“100%”, “z-index”:“999”, “border-style”:“none none none none”, “border-width”:“0px”, “background”:“none”});

showOrHideHeader();

function showOrHideHeader() {
var currentPositionFromTop = $(window).scrollTop();

if (currentPositionFromTop > scrollPositionToShowHeader) {
(boxToFix).fadeIn(); (boxClone).fadeIn();
} else {
(boxToFix).fadeOut(); (boxClone).fadeOut();
}
}

$(window).scroll(function() {
showOrHideHeader();
});

I hope this helps someone.

Thanks,
Victor.

Matt_Hickman

Yeah I can try! First thing I had to do is install a jQuery tag in the Head and named it jQuery (1.4.2):

It looks like this:

image.png

Then I put the box in the top section that will be the sticky header. Then I copy the box’s ID:

image.png

Finally, we’ll put in our sticky header Javascript:

image.png

I hope this helps!

J

I love this solution, Johnny! I’m curious to see how this would affect conversion rate, as it provides an ‘always on’ solution to jump back to the form. Awesome work!

S

Hey @Nayon , I am using this code:

//Replace ID below with your own box ID var boxToFix = '#lp-pom-box-789'; //Replace 691 below with your own var scrollPositionToShowHeader = 691; var boxParent = $(boxToFix).parent(); var boxClone = $(boxToFix).clone(); $(boxClone).appendTo(boxParent).css({"position":"fixed", "left":"0", "top":"0", "width":"100%", "z-index":"899"}).children().remove(); $(boxToFix).css({"position":"fixed", "left":"auto", "top":"0px", "width":"100%", "z-index":"999", "border-style":"none none none none", "border-width":"0px", "background":"none"}); showOrHideHeader(); function showOrHideHeader() { var currentPositionFromTop = $(window).scrollTop(); if (currentPositionFromTop > scrollPositionToShowHeader) { $(boxToFix).show(); $(boxClone).show(); } else { $(boxToFix).hide(); $(boxClone).hide(); } } $(window).scroll(function() { showOrHideHeader(); });
Nayon
Userlevel 2
Badge +1

Hey, It worked! Thank you very much.

Though it gets fixed as header on the top of the page after scrolling, I was wondering how it could get fixed on the bottom of the page after scrolling.

Noah
Userlevel 7

Hey @Nayon, if you’re looking for a footer you should be able to change the value of variable headerOrFooter to footer:

G

Thanks @Nicholas for the tip 🙂

A

Could you help me with the sticky header?

Thanks!

Zoe_Tattersall
Userlevel 6
Badge +3

Hey @carpz - you just need to put all the content into a box within the section and update the script to that box id 🙂

You currently have everything in lp-pom-block-398 from what I can see, but the script actually references lp-pom-box-398.

Here’s an example from on my old landing page -

59%20am

The the box is what holds the content and is referenced in the script -

10%20am

We’re more than just your type. We do awesome, too. And website design, graphics, product photography, video content & more. https://sevahcreative.com
P

Perfect, this works. Thank you!

Matt_Hickman

Hi! I had to add the jQuery (1.4.2) script in the Head:

Also, make sure your Box ID in the script starts with the # symbol. I noticed when I copy and paste that ID it doesn’t have the symbol so I had to put that in myself:

image.png

Did any of this help?

G

Thank you - this works great. Do you have any tips on how we could change the opacity of the background of the header on scroll, please? I basically wanted to have it transparent when the page is loaded, but as you scroll down (to avoid it being illegible) have a background colour appear.

P

i’ve tried it, but it doesn’t work

Johnny_Opao
Userlevel 3

Hey there! I took a look at your page and it looks like you have some custom CSS conflicting with the script.

<br /> position: fixed;
<br /> top: 0;
<br /> right: 0;
<br /> left: 0;
<br /> z-index: 99;
<br /> width: 100%!important;
<br /> }
<br /><br /> </style>```   
 
Remove the snippet above from your CSS stylesheets box and the script should work as intended.
A

Nice
/ Torben

B

Love it!

Would work great on a longer landing page!

G

it works perfectly. It would be nice to have a header that is not as wide as the page

A

Thanks!!

Very curious to see how this converts, as the approach seems to be becoming more and more popular. Anyone on this forum A/B testing with and without fixing the header?

L

Is there a script that will allow a form on a page to scroll with the user similar to this?

Anton_K

I have same problems with logo & button!
http://prntscr.com/69r9ld

J

Hi Adam, 
Just wanted to follow up with this as it’s been a while since you initially asked this question. Did you A/B test this approach on your landing page? If so, I would love to see the results of the test. Feel free to share with the community!

J

Hi Laura, 
Can you give me a bit more information on what you’re trying to achieve here? I’d love to point you in the right direction. 

Johnny_Opao
Userlevel 3

Hey Anton - We got your support email. If you haven’t seen it then here’s a copy of what was sent:

You have some unnecessary CSS that was likely carried over by another fixed header solution you tried.

In your CSS stylesheets box remove this snippet of code:

\<pre\>\<code\>\<style\> #lp-pom-box-188 { position: fixed; top: 0; right: 0; left: 100; z-index: 699; width: 100%!important; } \</style\>\</code\>\</pre\>

P

http://dostavka.flowerbox.kiev.ua/
header from this page

Reply


Terms & ConditionsCookie settings