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

Show first post

156 replies

jaemaz

Thanks for the resource! Got it to work super smoother for my footer, but I want to use the javascript across all my pages and variants— so I need it to work with a custom css class— not just the id block. I tried to insert my custom class in there, and it kinda worked, but not completely. Does anyone have any insight into how it can be made to work consistently using a css class? Thanks al!

Trevor_Breslin

Is it possible to fix the header vertically but not horizontally? Thanks!

Finge
Userlevel 6
Badge +4

Hi @Trevor_Breslin! Yes, this is possible. I had to dig up a page from “the archives” for this one. The links to fonts etc are broken for this page, but you will be able to see the how to stick something vertically. In this case it’s a form, not navigation. Hope this helps!

Version with form sticking to the far left
https://dev.conversionlab.no/floating-form/f.html

Version with form fixed
https://dev.conversionlab.no/floating-form/g.html

CSS Code for far left

    #lp-pom-box-77 {
    position: fixed;
    top: 6%;
    left: 0;
  }

Code for fixed box (some media specifics in there too, but you get the idea)

  @media (min-width: 320px) {
    #lp-pom-box-77 {
    position: fixed;
    top: 8%;
    left: 1%;
  }
    
  @media (min-width: 900px) {
    #lp-pom-box-77 {
    position: fixed;
    top: 8%;
    left: 3%;
  }
  }
  
  @media (min-width: 1200px) {
    #lp-pom-box-77 {
    position: fixed;
    top: 8%;
    left: 8%;
  }
  }
    
 @media (min-width: 1430px) {
    #lp-pom-box-77 {
    position: fixed;
    top: 8%;
    left: 19%;
  }
  }
Finge
Matt_Hickman

Hey everyone! It’s not working for me and the jQuery checkbox has been removed. I’ve double checked and made sure the tag is in the Before Body End and I’ve updated the boxToAppend. Any ideas?

Here’s the page: http://begin.fightingforyou.com/auto-accident/

Helene_Goncalves

Thanks for this tips. Do you know how I can add the fixed header below the image header, like this : Hubspot exemple
Helene

Luke_Overton

This isn’t working for me. The header is now fixed to the top of the page but all the buttons and text in the header have disapeared.

Here is my site: https://www.reigatedentalcntr.com/

Thanks

P

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

Best

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

Perfect, this works. Thank you!

Matt_Hickman

You’re welcome!

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

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

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!

D

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

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?

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

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.

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?

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

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.

F

thank you! worked for me

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?

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

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.

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.

Reply


Terms & ConditionsCookie settings