Skip to main content

: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';
    backgroundCSSo"bottom"] = '0px';
    colorOverlayCSS;"top"] = 'auto';
    colorOverlayCSS;"bottom"] = '0px';
    childrenCSS0"top"] = 'auto';
    childrenCSSu"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

It is not working for me. http://go.jewcer.com/testingmenu/ 

I fixed it. You should mention in the instructions that the script should be placed at “before body end tag” (or it does not work).

I added the script to have the box on the footer, but the box is actually duplicated (one on the footer and another one on the header). Anyone with the same issue?

nevermind. I just changed the header on the JavaScript for “top”: “auto” and “bottom”: “0”  and renamed to “footer”. It worked.

Sorry, haven’t A/B tested this, as I don’t have enough conversions yet to really run statistically significant tests. I did run Google PageSpeed Insight and scored 51/100 for Speed (which is Red), as says “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. Is this script causing Google to think that my site is slow? Could this be why the “Landing Page Quality” score is 4/10 when I try run AdWords (though other factors like relevance and expected click-through are high)?  Site is www.customdogcrate.com. Thanks

Hey Adam - The scripts Google Pagespeed insights mentions are default CSS and JS that is essential to your page in functioning and displaying properly.


As for the fixed header script - It’s best placed ‘before body end tag’, but regardless the script only works after the pages elements are loaded. So it’s not render blocking your page or causing additional load time. All it’s doing is applying a small amount of CSS changes to your box element.


In general I wouldn’t rely on Pagespeed insights as tool for improving adwords quality score. Pagespeed insights is suggestions to improve page speeds, while Adwords landing page quality has more to do with content and relevance.

Worked like a charm. Thanks Johnny!

Wow that works pretty well.  How about a script that stretches it vertically instead of horizontally?  I would like a box that goes on the side.  How about one that doesn’t stretch it at all?

Wow that works pretty well.  How about a script that stretches it vertically instead of horizontally?  I would like a box that goes on the side.  How about one that doesn’t stretch it at all?

Hey Cory! I don’t have any plans to make a script like that but I think it would be possible by making some modifications to my existing script. If you are familiar with modifying CSS I suggest taking a shot at it.


I’m thinking you’ll mainly modify the ‘width’ and ‘height’ CSS properties. Hope that helps!

Hey Johnny,


Thanks very much for this. It was a lifesaver.


I’m having some trouble with the header version of this on mobile though. It works, it’s just that it creates a small border box when the person initially scrolls down. To really see the problem, open it on a mobile device, not the mobile preview screen. Nonetheless, it shows up in a similar but different way on there as well.


My site: www.solanocontractors.com


Your help with this is very much appreciated and thanks again!

Ah nice catch JP. It looks like you found a bug.


I’ve went ahead and made some adjustments to the script. If you grab the updated script below you shouldn’t see that issue.


https://gist.github.com/johnnyopao/896e042fe7daac49d119


Let me know if you find anything else!

Johnny, you’re a saint. This script has been extraordinarily helpful with my landing pages. Thank you!

Love this, thanks!

Thanks so much for this!

Beautiful Fix! love how creative the unbounce community is. They should consider adding some of these items as regular features in the platform.

Thanks Jeff! If you have any crafty workarounds, please be sure to share them as well. :) 

Does this type of thing only work if you are using the paid version?  I set it up exactly as written and no dice.  Even trying to link to an id isn’t working.  I am still in the “eval” phase but almost ready to do a major launch of unbounce.  I’m just focusing on some of the advanced features now.

Thank you! I was going bonkers wondering why it wasn’t working.  That solved the problem!

Hey Amir/Joe - Sorry for the confusion. I’ve updated the post to include the placement of the script.


Thanks for pointing that out!

so how do i remove #lp-pom-block-8 in my ID? 

I have implemented it here: http://go.jewcer.com/howitworks/


I put an iframe in the header and made it sticky. Any idea why the iframe shows on Android phones but not on iphones? 


ADDITION:

In fact, this code for a sticky header prevents any iframe to be shown on iphones, anyone has a fix for this?

Works like a charm! > https://get.seoshop.com/webwinkel-software/

Looks great, Jordy! 😃

Hi! All the elements in the box  are moving to the left, Anyone else experiencing this problem?  

Reply


Terms & ConditionsCookie settings