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/

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

1. 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.

2. 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.

3. 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

4. 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>

5. On line 11 of the script, replace the box ID with your own box's ID:
You can find your boxes ID by clicking on the box and referring to the bottom of the ‘Properties’ menu.

6. Decide if you would like the box to stick to the head of the screen, or the foot of the screen. By default, the script is set to stick to the head. If you would like your box to stick to the foot, change 'header' to 'footer' on line 14 of the script.

7. Save the code, and save the page! You should now be able to see a sticky header / footer in Preview 🥳