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

9 years ago
30 July 2014
156 replies
5157 views

Userlevel 3

Johnny_Opao
Former Unbouncer
513 replies

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! 🙂

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

Show first post Hide first post

156 replies

Page 2 / 7

This isn’t working for me. The header is now fixed to the top of the page but all the buttons and text in the header have disapeared.

Here is my site: https://www.reigatedentalcntr.com/

Thanks

Thanks for this tips. Do you know how I can add the fixed header below the image header, like this : Hubspot exemple
Helene

Hey everyone! It’s not working for me and the jQuery checkbox has been removed. I’ve double checked and made sure the tag is in the Before Body End and I’ve updated the boxToAppend. Any ideas?

Here’s the page: http://begin.fightingforyou.com/auto-accident/

Userlevel 6

Hi @Trevor_Breslin! Yes, this is possible. I had to dig up a page from “the archives” for this one. The links to fonts etc are broken for this page, but you will be able to see the how to stick something vertically. In this case it’s a form, not navigation. Hope this helps!

Version with form sticking to the far left
https://dev.conversionlab.no/floating-form/f.html

Version with form fixed
https://dev.conversionlab.no/floating-form/g.html

CSS Code for far left

    #lp-pom-box-77 {
    position: fixed;
    top: 6%;
    left: 0;
  }

Code for fixed box (some media specifics in there too, but you get the idea)

  @media (min-width: 320px) {
    #lp-pom-box-77 {
    position: fixed;
    top: 8%;
    left: 1%;
  }
    
  @media (min-width: 900px) {
    #lp-pom-box-77 {
    position: fixed;
    top: 8%;
    left: 3%;
  }
  }
  
  @media (min-width: 1200px) {
    #lp-pom-box-77 {
    position: fixed;
    top: 8%;
    left: 8%;
  }
  }
    
 @media (min-width: 1430px) {
    #lp-pom-box-77 {
    position: fixed;
    top: 8%;
    left: 19%;
  }
  }

Is it possible to fix the header vertically but not horizontally? Thanks!

Thanks for the resource! Got it to work super smoother for my footer, but I want to use the javascript across all my pages and variants— so I need it to work with a custom css class— not just the id block. I tried to insert my custom class in there, and it kinda worked, but not completely. Does anyone have any insight into how it can be made to work consistently using a css class? Thanks al!

Hi, is there a way to make the banner appear ONLY when we scroll past a certain section or after 15% of the page…

The sticky contains the same CTA button like the one in the header, and we don’t want to show it twice when the page loads. Only when the user scrolls down and doesn’t see the CTA button in the head section.

Never mind it works.

yes I did.

It doesn’t’ work for me. Can you please tell me how to fix it? https://www.321ignition.com/partners/

Lifesaver. I haven’t checked the Script Library checkbox. Thank you!

You’ve checked this?

https://screencast.com/t/gXaOHcmyeSHS

It doesn’t work for me! http://unbouncepages.com/partner-2060/

Hi all, I tried to insert the sticky nav header but it is not working.

I referenced a Box ID (within a section) within the script.
I also added the script correctly under the Before Body End tag.

Can someone help troubleshoot please? Thank you!
https://bit.ly/2Yud08l

You turned the entire section to sticky? or its a box?

I’ve tried adding this code but it doesn’t seem to work. Here is my test page.

http://unbouncepages.com/landing-page-23846283854/

Thanks.

Joel

I can’t seem to make my headerbar sticky. I created a box element in the top of my page and
I have changed the box ID to the ID of my box in the javascript. Can somebody help me look into where the mistake can be?

When I then add the stylesheet for fading, the bar completely disappears. So it seems that the stylesheet part triggers but the script for the bar has an error.

http://borsenlive.dk/bec/

Thanks in advance.