[Tips & Scripts] Creating a Fixed Header/Footer (aka Sticky Header)

Johnny_Opao
Userlevel 3

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

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

156 replies

M

I am attempting to use this snippet to keep the header of my page fixed at the top, but I am encountering some problems that I’m hoping someone can help me with.

I follow the above instructions and create the JS and change the box# the 1 place it needs to be changed. However when I do that it messes up the entire header and moves copy as well as the header. Below is the JS that i’ve uploaded

Capture2
!

F

Hi,

we already implemented the sticky header a few weeks/months back and we didn’t notice any issues. But only recently we figured out that there is an issue on small screens which are less wide than our page properties.

Users are only able to scroll to the right on the page, but not within the header and therefore can’t see all the elements. Please take a look at the youtube video. The page for reference ist Prüfplaner

Did anyone experience the same issues? How did you solve it?

Thank you

M

I am trying to make a sticky footer on mobile and a sticky header on desktop with the same template. I got the footer for mobile working, but for desktop, i am specifying the header to stick, but it’s making my box stick to the bottom of the page instead.

Any ideas?

I created two javascripts (one for the footer, one for the header)

STICKY FOOTER

STICKY HEADER

A

Hi,

I am trying to make my header sticky and also have the button scroll to a section on the landing page but I’m unable to do it - can you please help?

Thanks!

21%20AM

Zoe_Tattersall
Userlevel 6
Badge +3

Hey @alyssawee can you share the page URL? 🙂

We’re more than just your type. We do awesome, too. And website design, graphics, product photography, video content & more. https://sevahcreative.com
A

Hi Zoe, the page URL is https://offers.piquetea.com/landing-freecartons/ right now but I intend to extend it to all my other landing pages (of the same style)

A

Could you help me with the sticky header?

Thanks!

Zoe_Tattersall
Userlevel 6
Badge +3

Sure @alyssawee – I’ll msg you now

We’re more than just your type. We do awesome, too. And website design, graphics, product photography, video content & more. https://sevahcreative.com
C

@Zoe_Tattersall Could you assist with mine? Can’t seem to make it work.

www.leadaccess.co.uk/test

Thanks!

Zoe_Tattersall
Userlevel 6
Badge +3

Hey @carpz - you just need to put all the content into a box within the section and update the script to that box id 🙂

You currently have everything in lp-pom-block-398 from what I can see, but the script actually references lp-pom-box-398.

Here’s an example from on my old landing page -

59%20am

The the box is what holds the content and is referenced in the script -

10%20am

We’re more than just your type. We do awesome, too. And website design, graphics, product photography, video content & more. https://sevahcreative.com
Elias_Hazari

Hello,

I have added the script and replaced the id with my id. After that the sticky header is working but the elements of the header are not showing!

Page link: http://unbouncepages.com/roofing-replacement-page/

image

Please help me solving this issue.

Thanks

F

I’m having the same issue as Elias — the sticky header works, but none of the elements are visible in Preview. 😦

R

Hello - I’m having the same issues as Elias and feezy mentioned above. My elements in front of the box are not showing. Can you please help?

Caroline
Userlevel 5
Badge +2

Hi @RogueMarketing!

Could you share a link to your page? That will help us find what went wrong!

Thank you,
Caroline

M

I can’t seem to make my headerbar sticky. I created a box element in the top of my page and
I have changed the box ID to the ID of my box in the javascript. Can somebody help me look into where the mistake can be?

When I then add the stylesheet for fading, the bar completely disappears. So it seems that the stylesheet part triggers but the script for the bar has an error.

http://borsenlive.dk/bec/

Thanks in advance.

J

I’ve tried adding this code but it doesn’t seem to work. Here is my test page.

http://unbouncepages.com/landing-page-23846283854/

Thanks.

Joel

Ekon_Launch

You turned the entire section to sticky? or its a box?

J

Hi all, I tried to insert the sticky nav header but it is not working.

  1. I referenced a Box ID (within a section) within the script.
  2. I also added the script correctly under the Before Body End tag.

Can someone help troubleshoot please? Thank you!
https://bit.ly/2Yud08l

lyamen321

It doesn’t work for me! http://unbouncepages.com/partner-2060/

Ekon_Launch

You’ve checked this?

https://screencast.com/t/gXaOHcmyeSHS

J

Lifesaver. I haven’t checked the Script Library checkbox. Thank you!

lyamen321

It doesn’t’ work for me. Can you please tell me how to fix it? https://www.321ignition.com/partners/

lyamen321

yes I did.

image

lyamen321

Never mind it works.

Ekon_Launch

Hi, is there a way to make the banner appear ONLY when we scroll past a certain section or after 15% of the page…

The sticky contains the same CTA button like the one in the header, and we don’t want to show it twice when the page loads. Only when the user scrolls down and doesn’t see the CTA button in the head section.

Reply


Terms & ConditionsCookie settings