Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Centered fixed header or footer menu on Unbounce (Set placement to 'before body end tag')

Creating a centered fixed header or footer menu on Unbounce

Follow the full instructions here: https://getsatisfaction.com/unbounce/topics/creating_a_fixed_header_menu

<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 = $(boxToAppend).parent();
  var boxClone = $(boxToAppend).clone()

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

</script>
@avasinis

This comment has been minimized.

Copy link

commented Mar 14, 2018

thanks!

@BrianH2

This comment has been minimized.

Copy link

commented May 16, 2018

🙌

@brunagarcia

This comment has been minimized.

Copy link

commented Sep 11, 2018

Uhhh so good! Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.