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

navigation
ui
design

#22

Hey Anton - Would you mind sharing your page with this issue? That way I can take a closer look.

Alternatively I can shoot you a email if you don’t want to share your page here


#23

Hey Anton - Would you mind sharing your page with this issue? That way I can take a closer look.

Alternatively I can shoot you a email if you don’t want to share your page here


#24

Hey Anton - I saw your ticket you sent us and reviewed the issue

We made some changes to how we handle background properties on Unbounce. My script wasn’t up to date with those changes. I went ahead and added a quick fix the script.

I may make some further changes if it doesn’t play well with some of the other newer background features but for now your specific issue should be fixed :slight_smile:


#25

Thanks Johny! It is really great job!
It is the best support I ever met!


#26

oh, but button on the Header doesn’t work!


#27

Thanks for pointing that out Anton. I’ve made some further adjustments to the script and your page. Let me know if you find any other issues


#28

It is not working for me. http://go.jewcer.com/testingmenu/ 


#29

I fixed it. You should mention in the instructions that the script should be placed at “before body end tag” (or it does not work).


#30

I added the script to have the box on the footer, but the box is actually duplicated (one on the footer and another one on the header). Anyone with the same issue?


#31

nevermind. I just changed the header on the JavaScript for “top”: “auto” and “bottom”: “0”  and renamed to “footer”. It worked.


#32

Sorry, haven’t A/B tested this, as I don’t have enough conversions yet to really run statistically significant tests. I did run Google PageSpeed Insight and scored 51/100 for Speed (which is Red), as says “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. Is this script causing Google to think that my site is slow? Could this be why the “Landing Page Quality” score is 4/10 when I try run AdWords (though other factors like relevance and expected click-through are high)?  Site is www.customdogcrate.com. Thanks


#33

Hey Adam - The scripts Google Pagespeed insights mentions are default CSS and JS that is essential to your page in functioning and displaying properly.

As for the fixed header script - It’s best placed ‘before body end tag’, but regardless the script only works after the pages elements are loaded. So it’s not render blocking your page or causing additional load time. All it’s doing is applying a small amount of CSS changes to your box element.

In general I wouldn’t rely on Pagespeed insights as tool for improving adwords quality score. Pagespeed insights is suggestions to improve page speeds, while Adwords landing page quality has more to do with content and relevance.


#34

Worked like a charm. Thanks Johnny!


#35

Wow that works pretty well.  How about a script that stretches it vertically instead of horizontally?  I would like a box that goes on the side.  How about one that doesn’t stretch it at all?


#36

Wow that works pretty well.  How about a script that stretches it vertically instead of horizontally?  I would like a box that goes on the side.  How about one that doesn’t stretch it at all?


#37

Hey Cory! I don’t have any plans to make a script like that but I think it would be possible by making some modifications to my existing script. If you are familiar with modifying CSS I suggest taking a shot at it.

I’m thinking you’ll mainly modify the ‘width’ and ‘height’ CSS properties. Hope that helps!


#38

Hey Johnny,

Thanks very much for this. It was a lifesaver.

I’m having some trouble with the header version of this on mobile though. It works, it’s just that it creates a small border box when the person initially scrolls down. To really see the problem, open it on a mobile device, not the mobile preview screen. Nonetheless, it shows up in a similar but different way on there as well.

My site: www.solanocontractors.com

Your help with this is very much appreciated and thanks again!


#39

Ah nice catch JP. It looks like you found a bug.

I’ve went ahead and made some adjustments to the script. If you grab the updated script below you shouldn’t see that issue.

https://gist.github.com/johnnyopao/896e042fe7daac49d119

Let me know if you find anything else!


#40

Johnny, you’re a saint. This script has been extraordinarily helpful with my landing pages. Thank you!


#41

Love this, thanks!