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

I love this solution, Johnny! I’m curious to see how this would affect conversion rate, as it provides an ‘always on’ solution to jump back to the form. Awesome work!

i’ve tried it, but it doesn’t work

Hey there! I took a look at your page and it looks like you have some custom CSS conflicting with the script.


<br /> position: fixed;

<br /> top: 0;

<br /> right: 0;

<br /> left: 0;

<br /> z-index: 99;

<br /> width: 100%!important;

<br /> }

<br /><br /> </style>```   

 

Remove the snippet above from your CSS stylesheets box and the script should work as intended.

Nice

/ Torben

Love it!


Would work great on a longer landing page!

it works perfectly. It would be nice to have a header that is not as wide as the page

Thanks!!


Very curious to see how this converts, as the approach seems to be becoming more and more popular. Anyone on this forum A/B testing with and without fixing the header?

Is there a script that will allow a form on a page to scroll with the user similar to this?

I have same problems with logo & button!

http://prntscr.com/69r9ld

Hi Adam, 

Just wanted to follow up with this as it’s been a while since you initially asked this question. Did you A/B test this approach on your landing page? If so, I would love to see the results of the test. Feel free to share with the community!

Hi Laura, 

Can you give me a bit more information on what you’re trying to achieve here? I’d love to point you in the right direction. 

Hey Anton - We got your support email. If you haven’t seen it then here’s a copy of what was sent:


You have some unnecessary CSS that was likely carried over by another fixed header solution you tried.


In your CSS stylesheets box remove this snippet of code:


\<pre\>\<code\>\<style\> #lp-pom-box-188 { position: fixed; top: 0; right: 0; left: 100; z-index: 699; width: 100%!important; } \</style\>\</code\>\</pre\>

http://dostavka.flowerbox.kiev.ua/

header from this page

Hey there Pro lander! - Is there something wrong with the header? It seems to look great when I look at the page. If you can clarify what’s wrong i’d be happy to help

Here is an example site: http://titangranitestl.com/

When you scroll down the header stays put at the top of the screen.

everything is ok, i’m not coder.

i’ve just shared our code for an example

oh perfect. Thanks for sharing then 🙂

Thanks Johnny Opao & Prolander)! Everything works.

Sorry, but with opacity background: 80% my header hasn’t perfect view.

http://prntscr.com/6c3n0p


<br /><br /> //Fixed Menu (Header or footer) v1.2<br /><br /> //Replace ID below with your own box ID<br /> var boxToAppend = '#lp-pom-box-188';<br /><br /> //Set to 'header' or 'footer'<br /> var headerOrFooter = 'header';<br /><br /> var backgroundCSS = {"position":"fixed", "left":"0", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"899"};<br /> 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"};<br /><br />



 if (headerOrFooter === 'footer') {<br />



 backgroundCSSS"top"] = 'auto';<br />



 backgroundCSSS"bottom"] = '0px';<br />



 childrenCSSS"top"] = 'auto';<br />



 childrenCSSS"bottom"] = '0px';<br /> }<br /><br /> var boxParent = $(boxToAppend).parent();<br /> $(boxToAppend).clone().appendTo(boxParent).css(backgroundCSS).children().remove();<br /> $(boxToAppend).css(childrenCSS);<br /><br />

Hey Anton - Would you mind sharing your page with this issue? That way I can take a closer look.


Alternatively I can shoot you a email if you don’t want to share your page here

Hey Anton - Would you mind sharing your page with this issue? That way I can take a closer look.


Alternatively I can shoot you a email if you don’t want to share your page here

Hey Anton - I saw your ticket you sent us and reviewed the issue


We made some changes to how we handle background properties on Unbounce. My script wasn’t up to date with those changes. I went ahead and added a quick fix the script.


I may make some further changes if it doesn’t play well with some of the other newer background features but for now your specific issue should be fixed 🙂

Thanks Johny! It is really great job!

It is the best support I ever met!

oh, but button on the Header doesn’t work!

Thanks for pointing that out Anton. I’ve made some further adjustments to the script and your page. Let me know if you find any other issues

Reply


Terms & ConditionsCookie settings