Skip to main content

I would like to use the sticky bar feature to create a top navigation bar that is permanent - meaning, it can’t simply be closed by the visitor with the X button. Is there a way to do this in Unbounce?

Sure - Use a box instead of a sticky bar. The following script will make it stick to the head or foot of a page and will make it full width.


    <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-146';



  //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>

Reply


Terms & ConditionsCookie settings