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

navigation
ui
design

#42

Thanks so much for this!


#43

Beautiful Fix! love how creative the unbounce community is. They should consider adding some of these items as regular features in the platform.


#44

Thanks Jeff! If you have any crafty workarounds, please be sure to share them as well. :) 


#45

Does this type of thing only work if you are using the paid version?  I set it up exactly as written and no dice.  Even trying to link to an id isn’t working.  I am still in the “eval” phase but almost ready to do a major launch of unbounce.  I’m just focusing on some of the advanced features now.


#46

Thank you! I was going bonkers wondering why it wasn’t working.  That solved the problem!


#47

Hey Amir/Joe - Sorry for the confusion. I’ve updated the post to include the placement of the script.

Thanks for pointing that out!


#48

so how do i remove #lp-pom-block-8 in my ID? 


#50

I have implemented it here: http://go.jewcer.com/howitworks/

I put an iframe in the header and made it sticky. Any idea why the iframe shows on Android phones but not on iphones? 

ADDITION:
In fact, this code for a sticky header prevents any iframe to be shown on iphones, anyone has a fix for this?


#51

Works like a charm! > https://get.seoshop.com/webwinkel-software/


#52

Looks great, Jordy! :smiley:


#53

Hi! All the elements in the box  are moving to the left, Anyone else experiencing this problem?  


#54

Can you modify the code so a selected element sticks to the top or bottom of selected section of a page? Good usage example is here - http://unbouncepages.com/horse-unbounce-landing-page-1/ (about us section)


#55

OK Found it!


#56

Almost works - tried this and the box moves but don’t get the smooth transition between page sections.


#57

Hi Jeff - what do you mean? Can you provide the url?


#58

This was the test url - The page was mostly thrown together to test the script, so not clean at all.

When you scroll the sticky element will move from the first section to the second, but for some reason lacks the smooth transition sliding between the two positions.

There may be some additional css that is missing (external stylesheet in the example?).

Didn’t spend a lot of time figuring it out, but if you have any suggestions or can see something I missed, it’s a great feature and would love to be able to include.

Example located here:
http://www.eclipse-page.info/sticky-sidebar-test-1/


#59

I have also attempted this but am unable to change the box ID data. Also not sure what to replace that ID with. “Replace the box ID with your own boxes ID:” HUH?!


#60

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.


#61

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!


#62

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!