[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

Kevin_Garneau
Rank
Userlevel 2
Badge

@justindlowe 

Taking a look at your page it seems like you may have fixed it as when I visit it, the words are sticking to the header? 

If you are still having an issue try clearing your browsers cache and try again?

J

I know this is a seriously old post but Unbounce suggested I use this code and just in case it is still be monitored, I am having an issue.

I setup everything and updated the jquery. The box appears and sticks, but the items inside the box do not.

https://rxrs.com/omega/
 

Live Page
What it looks like while editing.

Any idea what I’m doing wrong?

I’m an idiot and I was using a section and not a box. I solved the problem. 

J

I know this is a seriously old post but Unbounce suggested I use this code and just in case it is still be monitored, I am having an issue.

I setup everything and updated the jquery. The box appears and sticks, but the items inside the box do not.

https://rxrs.com/omega/
 

Live Page
What it looks like while editing.

Any idea what I’m doing wrong?

Md_Mahinur_Khan
Userlevel 3
Badge

With the Header sticky, i can’t control default sticky bar.

Please check this, we need something like this

Screenshot 2022-02-08 at 7.45.34 PM
Screenshot 2022-02-08 at 7.45.34 PM2792×594 146 KB

but i see something like this by default after setting up default Unbounce sticky bar

Screenshot 2022-02-08 at 7.46.44 PM
Screenshot 2022-02-08 at 7.46.44 PM2804×668 161 KB

I did, something like this code in the Unbounce default sticky bar. But it doesn’t work

Screenshot 2022-02-08 at 7.47.06 PM
Screenshot 2022-02-08 at 7.47.06 PM1346×858 73.1 KB

So let me know how can i make it possbile in Unbounce with the Fixed header sticky and Unbounce default sticky?

Thanks,
Mahinur

Mahinur
Homeschool-Teachers

Trying to implement this. It’s not smooth scrolling like the sample. Also would like to make this header show after the user scrolls past the optin form.

Here’s the capture page: https://freesession.homeschool-teachers.com/freereport/

Followed the code provided in this thread v1.3.1.

Any ideas how to fix this? Thanks in advance.

C

This works great, but is there a way to have to nav disappear after the user scrolls a bit? Is there also a way to use jQuery twice on a page? This conflicts with another section (accordion) that also uses jQuery.

P_Fonseca1

Hi everyone. Any ideas why this wouldn’t work if the sticky element is inside a lightbox?

14da890123762fb66399f94cba814a29

It loads in the right place when the lightbox opens, but then doesn’t scroll with the page.

Mariela_Mino

Afternoon! URGENT!!

I’m having some problems with the fixed header on mobile and tablet view: the header is cut from the frame as the screen is smaller.

How to make it mobile responsive? To make the header stretch out and in to fit on the screen on different devices.

Can someone help me with this? I’m new to coding.

Matt_Hickman

I usually add this javascript found on this documentation:

https://documentation.unbounce.com/hc/en-us/articles/360022719471-Adding-Smooth-Scrolling-Links-and-Buttons-for-Anchor-Links

Nicole_Lopez

Afternoon!

I have a skinny bar on my unbounce landing page. The button on the skinny bar is linked to the form at the bottom of the page, so if they click it, it scrolls all the way down and takes them to the form.

How do I enable smooth scrooling in this situation?

F

thank you! worked for me

Matt_Hickman

I usually set the box opacity to 90 and the original section it starts in would be the same color as the box itself. That way it looks normal and colored when it’s at the top, but when I scroll you can see through it a bit. I’m sure there’s a more technical way to do it and make it prettier but this is how I’ve worked it out easily.

G

Thank you - this works great. Do you have any tips on how we could change the opacity of the background of the header on scroll, please? I basically wanted to have it transparent when the page is loaded, but as you scroll down (to avoid it being illegible) have a background colour appear.

Matt_Hickman

Hi! I had to add the jQuery (1.4.2) script in the Head:

Also, make sure your Box ID in the script starts with the # symbol. I noticed when I copy and paste that ID it doesn’t have the symbol so I had to put that in myself:

image.png

Did any of this help?

Mich_Cam

Hi!, I think I have the same problem that you, but I notice that your link works! Can you please share the soltion with me? I have followed the same instructions than you and its not working.

P

Hi @Johnny_Opao ! It works perfectly for me! I was wondering if there is a way to make it appear only after 5 seconds for example (this is possible with sticky bars, so it might be possible with this fixed footer?).
Best,
Vanessa

Avinoam_Abrahamowitz

How can I make the content on the sticky bar stay put instead of moving when a screen is not at 100% zoom?

D

Is there a way to show it only after 10% scroll?

K

I figured out the problem. I applied the script to a section instead of a box. I also did what you suggested and it works now! Thanks for the help!

Matt_Hickman

I’ve had that same issue before too. I can’t remember what I did to fix it exactly though. Starting from scratch may help by just rebuilding the whole section, starting with the box first.

K

Can I get some help with this script? I added the javascript to a section and it works as intended, however, the items I had inside the section (logo, buttons, etc.) are not displaying. At first I thought it was a z-index issue, but after looking at the source code, it’s completely gone. I’m a beginner when it comes to javascript so any help you could provide would be great. Thanks!

Matt_Hickman

You’re welcome!

P

Perfect, this works. Thank you!

Matt_Hickman

Yeah I can try! First thing I had to do is install a jQuery tag in the Head and named it jQuery (1.4.2):

It looks like this:

image.png

Then I put the box in the top section that will be the sticky header. Then I copy the box’s ID:

image.png

Finally, we’ll put in our sticky header Javascript:

image.png

I hope this helps!

P

Hey, i try this on my page, but its not working. Can you help me?

Best

Reply


Terms & ConditionsCookie settings