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

navigation
ui
design

#1

: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! :slight_smile:

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

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
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, copy the script within the link below to your ‘javascripts’ box (set placement to ‘before body end tag’).

https://gist.github.com/johnnyopao/89…

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


Adding Nav-bar with Drop-down functionality
Dynamically Reorder Sections
[Add] Fixed CTA On Scroll 2.0
How to link a Sticky Bar button to a lightbox form on a separate page?
How to control nesting of objects
#2

I love this solution, Johnny! I’m curious to see how this would affect conversion rate, as it provides an ‘always on’ solution to jump back to the form. Awesome work!


#3

i’ve tried it, but it doesn’t work


#4

Hey there! I took a look at your page and it looks like you have some custom CSS conflicting with the script.

<br /> position: fixed;
<br /> top: 0;
<br /> right: 0;
<br /> left: 0;
<br /> z-index: 99;
<br /> width: 100%!important;
<br /> }
<br /><br /> </style>```   
 
Remove the snippet above from your CSS stylesheets box and the script should work as intended.

#5

Nice
/ Torben


#6

Love it!

Would work great on a longer landing page!


#7

it works perfectly. It would be nice to have a header that is not as wide as the page


#8

Thanks!!

Very curious to see how this converts, as the approach seems to be becoming more and more popular. Anyone on this forum A/B testing with and without fixing the header?


#9

Is there a script that will allow a form on a page to scroll with the user similar to this?


#10

I have same problems with logo & button!
http://prntscr.com/69r9ld


#11

Hi Adam, 
Just wanted to follow up with this as it’s been a while since you initially asked this question. Did you A/B test this approach on your landing page? If so, I would love to see the results of the test. Feel free to share with the community!


#12

Hi Laura, 
Can you give me a bit more information on what you’re trying to achieve here? I’d love to point you in the right direction. 


#14

Hey Anton - We got your support email. If you haven’t seen it then here’s a copy of what was sent:

You have some unnecessary CSS that was likely carried over by another fixed header solution you tried.

In your CSS stylesheets box remove this snippet of code:

\<pre\>\<code\>\<style\> #lp-pom-box-188 { position: fixed; top: 0; right: 0; left: 100; z-index: 699; width: 100%!important; } \</style\>\</code\>\</pre\>


#15

http://dostavka.flowerbox.kiev.ua/
header from this page


#16

Hey there Pro lander! - Is there something wrong with the header? It seems to look great when I look at the page. If you can clarify what’s wrong i’d be happy to help


#17

Here is an example site: http://titangranitestl.com/
When you scroll down the header stays put at the top of the screen.


#18

everything is ok, i’m not coder.
i’ve just shared our code for an example


#19

oh perfect. Thanks for sharing then :slight_smile:


#20

Thanks Johnny Opao & Prolander)! Everything works.


#21

Sorry, but with opacity background: 80% my header hasn’t perfect view.
http://prntscr.com/6c3n0p

<br /><br /> //Fixed Menu (Header or footer) v1.2<br /><br /> //Replace ID below with your own box ID<br /> var boxToAppend = '#lp-pom-box-188';<br /><br /> //Set to 'header' or 'footer'<br /> var headerOrFooter = 'header';<br /><br /> var backgroundCSS = {"position":"fixed", "left":"0", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"899"};<br /> 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"};<br /><br />

 if (headerOrFooter === 'footer') {<br />

 backgroundCSS["top"] = 'auto';<br />

 backgroundCSS["bottom"] = '0px';<br />

 childrenCSS["top"] = 'auto';<br />

 childrenCSS["bottom"] = '0px';<br /> }<br /><br /> var boxParent = $(boxToAppend).parent();<br /> $(boxToAppend).clone().appendTo(boxParent).css(backgroundCSS).children().remove();<br /> $(boxToAppend).css(childrenCSS);<br /><br />