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

9 years ago
30 July 2014
156 replies
5161 views

Userlevel 3

Johnny_Opao
Former Unbouncer
513 replies

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! 🙂

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

Show first post Hide first post

156 replies

Page 4 / 7

Hey I found it out!

you have to add:

var scrollPositionToShowHeader = 691;

(instead of 691 you have to write the number of pixels after wich you wish the header to appear)

It works for me!

Userlevel 2

No! Unfortunately I haven’t!

I have the same problem,
did you find the way to do it?

Hi!
Is it possible to turn a box in the middle of the page into a fixed header as soon as the user scrolls down?
When applying your code the box goes at the top of the page from the beginning.

Thanks
Silvia

Userlevel 2

Hi,
I have successfully created the sticky footer with the script [ Thanks to @Johnny_Opao ] but what I want now is the fixed footer to appear after a certain scrolling of the page.

Say, if the visitor scrolls down 1000px, the sticky footer appears and it also disappears when the page reaches the bottom of the page!
Like the sticky footer on this page: https://zeusliving.com/landlord

Here is my Unbounce page: http://get.sonder.com/zeus-property-management/

The script I have used:

Where do I need to put the scrolling px?

@Hristian any idea?
Thanks is advance!

Hello,

this is very helpful but I am looking for a script, that keeps the sizes of my ID-element and is not a header.
How can I not change the sizes and the position of my Box element?

Also:

My box element scrolling should only move if User scrolls further down than a specified position, for example after 3000px scrolling down the script should start moving the box element when user scrolls down. In the opposite the box element should not go further up than a specified position. Is this possible somehow?

Thanks in advance!

Userlevel 7

Hi @Steven_Woda,

The link you’ve shared leads to a survey page rather than an Unbounce landing page.

Hi everyone. I love this tip/trick. Unfortunately, I am struggling to figure out why it is not working on my page.

Any ideas?

Here is the test page… http://www.uknowkids.com/test/

Useful tip! Thank you very much!

Awesome!!! This is just what I needed.

Hi Matthew Dollinger,

Can you help me? I would like to do this with my landing page. Bar starts at the bottom of the page and then sticks to the top.

Thanks a lot!

Userlevel 7

Hi Elliott,

You are probably correct as to the cause of your issue but in order for us to be able to troubleshoot it for you, we need to see the actual page.

If you can provide us with a link, I’m sure the community here will try to help out.

Best,
Hristian

Hey guys,

I’m having some troubles with this.

Header is sticking but all elements (logo, phone number, CTA) are not visible.
All elements on my page are pushed down.
I’m assuming this is because of some conflicting CSS or JS? Any help would be greatly appreciated!

Hi, how did you add it starting on the second page

solved 🙂

Hello there, what are really want is fading effect to the header actually, is there anyone to help me 🙂

Hi All, how can we add speed for the header, i have added the header at second page but i dont want it to appear very fast, can you help me to slow it down 🙂

Justin
Former Unbouncer
1556 replies
8 years ago
27 November 2015

Hristian,

Excellent points about creating a whole mini-site in Unbounce vs. the landing page approach. Aleks, have you tried running your paid traffic to a dedicated landing page instead? Would be curious to know if there were any lifts, and how this affected your conversion rates,

Justin
Former Unbouncer
1556 replies
8 years ago
27 November 2015

Woo-hoo! Problem solved. :)

Hi! Sorry, just found the problem - I applied the code to the block instead of the box. Works (for) now! Thanks!

Hi Hristian, thanks for your response. Well, actually, I just tried that recently since I wanted to see if that was perhaps the source of the problem. Of course with “After Body Tag” the JS is not applied and the page looks like it should without the fixed header. I set it (back) to “Before Body End Tag” now, kindly check again, if you can. Thanks!

Userlevel 7

Hi Aleks,

You seem to have the placement of the JS script set to “After Body Tag” and it needs to be “Before Body End Tag”.

Give it a try and let us know.

Best,
Hristian

P.S. It looks like you’ve built a whole website in Unbounce.
Interesting use case, although not really what Unbounce is meant to do.
Keep in mind that if you are pushing paid traffic to this page, it might not convert as well as a dedicated landing page with a single call to action and no links leading away/distracting your visitors.

Hello Johnny & all the rest, perhaps you can help; I have tried to implement the fixed header script to our site and… well, it doesn’t really work. I think some of the main CSS of the block in question (in my case “lp-pom-block-8”) is messing with the JS code, but I haven’t really figured out a way to edit it through Unbounce. I also tried putting !important in front of the CSS tags that the script makes, without success. So… the page address is: http://get.ganxy.com/cards-landing-pr… --> as you can('t) see, the menu in the header is missing and the entire content seems to be shifted downwards. Perhaps any of you have ideas why this is happening and how to fix it? Thanks a lot!

Hi Johnny -

We’ve been using this on alot of our different pages and clients love it. However we did have a client request for us to do something similar to what we have on our (parent) current site here http://socialcrunch.com/ where the sticky bar starts at the bottom of the page and then sticks to the top. Any insight on the code changes to do this? Thanks!

Zach Walker - when you set the lowest level box element (that you sit everything else on) click on it. Then look at the right side of the screen and the element properties dialog (where you set color, corners, etc.) Scroll to the very bottom and look at the “element-metadata” this will give you the ID of the box for use in the script.

Still working to get the scrolling fixed in mine, but has become a low priority in daily workload.

Page 4 / 7

Update:

Hey Everyone!

How to Install in Unbounce

Instructions

Reply

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded