Sridhar Katakam

Genesis and WordPress Tutorials

How to set up Sticky Header or Navigation in Genesis

by 69 Comments

Having a persistent, sticky header area or navigation can be a useful design element in some websites. In this article I provide the code on how we can make Header or Primary Navigation or Secondary Navigation in Genesis sticky/fixed.

While I've used Genesis Sample child theme for the demo site, the process (with few tweaks if needed) should work in any Genesis theme or for that matter, any WordPress site.

Sticky Header

Sample-Page-sticky-header

Live Demo

Below is the CSS code to make the site Header fixed in Genesis:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Dear sir..
    After adding the code to child theme’s functions.php as you described in step-2, i have got following problem “Parse error: syntax error, unexpected $end in /home/a7768091/public_html/wp-content/themes/eleven40/functions.php on line 79
    Please solve to get fixed header.
    Thank you.

    Reply

  • Hi! Thanks for this. How would I make BOTH the primary and secondary stick? If I make the secondary stick using your code for the Agency Pro theme, the primary menu becomes unstuck. Thanks.

    Reply

    • I managed to make multiple elements sticky by duplicating the code between:
      jQuery(document).ready(function($) {
      and
      });

      Then in the second chunk of code I changed all the $filter and $filterSpacer variables to something else, in my case I used $efilter and $efilterSpacer wherever they occurred.

      And of course the name of the class to be affected: .nav-primary

      I don’t know if that’s the “proper” way to do it, but it worked.

      Reply

  • Sridhar, you are the man! This is exactly what I wanted for my site and you made it happen for me in a matter of 5 minutes. Thank you!

    Reply

  • How would I change the point at which it “kicks-in”? I would like the menu to start sticking at a point below the top of the screen.

    Currently my sticky bottom nav disappears under my sticky top nav, then re-appears as it hits the top of the screen.

    This is not the same as changing the offset in the .fix and .admin-bar .fix though the value would be same as the .fix value, and would need to be included in the sticky-nav.js code. But where?

    Reply

  • Sridhar,

    Very nice – thank you!

    I tried the Genesis Sticky Menu plugin, but getting all the CSS right was a pain. I did not have to touch the primary menu CSS with this method. I also use the Dynamik theme and was able to paste the code nice into the appropriate custom slots – no direct editing of functions.php, etc.

    One question. When I scroll up, my menu shifts just a bit to the right and down. Any ideas where to look for this little annoyance?

    If you have any chance to look, the test site for just the menu (i.e. no real content) is here:
    http://expo.ingersollinteractive.com/

    Thanks for any help you (or anyone else) can share.

    – Peter

    Reply

  • Sridhar, I wanted to ask if you ever update this post, could you include something about using jQuery to hide the menu when inactive for 10 seconds or so. I noticed Mailchimp use a Sticky header but also have a nice touch by allowing the menu to disappear when viewers are not scrolling. http://blog.mailchimp.com/ – I tried working out how they did it but I don’t have that much experience as a developer. Anyway – thanks again.

    Reply

  • You are super! Thank you!

    I have a question though, it works great (I followed the make Primary menu Sticky), except it makes like a quick ‘jump’ motion when it goes to ‘stay sticky’ can you see what I mean? Is there any way to smooth this out? THANK YOU!

    I’m working with the Minimum Pro theme!

    The site is a test site and it’s: http://amystout.com/wordpress1/

    Reply

  • I’ve done all the steps listed above to add the sticky primary navigation menu, and yet it still does nothing. I’m using Genesis with the Adorable theme. I’m not sure what to do from here? Help please! 🙂

    Reply

  • Hi! Thanks for a great tutorial. I’m just wondering if anyone else has this problem or if anyone know a solution. In safari the text switches from bold to regular font when I scroll down and I can not see any reason why. I have switched of my custom fonts but that did not resolve the problem.

    Reply

  • Hi Sridhar,
    Hope you are doing well.
    I have been following your blog for quite a while. First met you at Ibuilder forum.
    Thanks for all the tuts, thanks a lot.
    Well, i was trying to use this tutorial to get my ubermenu sticky, by changing the CSS selectors.
    it went nicely, till i activated the w3tc total cache minify option and the page speed service.
    After activating them, the nav menu failed to stick.
    After trying several options i finally enqueued the ‘ stickUp
    ‘ jquery plugin and added a javascript.
    I have tried at least 5 jquery sticky plugins including stiockler.js.
    It seems ‘ stickUp
    it is the only one compatible with w3tc minify option and page speed service.
    once again thanks a lot, for helping me get started.
    thanks and regards

    Reply

  • Hi Sridhar,

    do you have any idea, how this can be disabled with smaller viewports? It works fine on desktop view – I sticked the sidebar on right side. But if it goes to responsive, the sidebar sticks further and overlays the content. Any help would be very appreciated. Just while writing, I had an idea. I did not test to set the z-index back to 0 on smaller viewports. Probably this could work. Do you have a better idea?

    Reply

  • Question. I just want the fixed header and I will not have a primary or secondary menu. When I remove the primary/secondary menus the site inner goes way up under the header area. Any ideas on how to make the header fixed and not have the text go all up under it? Click my name for site demo. 🙂

    Reply

  • You’re a Genesis legend! I love your articles! The only difference is that with the Dynamik child theme, I had to add a /lib/ to get to my js directory. But the sticky menu is PERFECT! Thanks!

    Reply

  • I tried to apply this to my new enterprise pro theme that I have the nav and social icons in the header. Is this still possible? Your tuts are great and am wondering if this is able. Thanks for any help you can provide.

    Reply

  • What a nice article!You are such an amazing coder man!The only question I have is if a horizontal line of 1 px thickness above the fixed menu when it is at the top of the page is normal.You can check it at vga-frankfurt.de

    Reply

  • It works beautifully! I have just tried the header for now. Will experiment with Primary and Secondary Nav soon. I never tire thanking you Sridhar! Phenomenal contribution to this community. Keep it up!

    Reply

  • Sridhar-

    I think I followed the directions correctly for making the Primary navigation menu fixed. Can you check my site and see if I have done something incorrectly?

    Thanks,

    Sasha

    Reply

  • Hi. Firstly a most wonderful tutorial that got my menu nice and sticky within a short amount of time so thank you very much.

    I have however encountered a problem. In chrome the sticky menu works perfectly, however it does not run properly in firefox for some reason. Is there any chance you could take a look and see if you can see what might be going wrong?

    http://www.uktransactionalanalysis.co.uk

    Many thanks to anybody that might be able to help.

    Dena

    Reply

  • Hello! I am using the Runway theme and I followed your instructions for the primary navigation and it doesn’t appear to be sticking. I’ve used these instructions before on a different site and it worked flawlessly so I’m not sure what’s happening here. My test site is here: http://mystylevita.southernblogsociety.com/

    Thank you for your help and your incredible tutorials!!
    Whitney

    Reply

  • Another great tutorial. Thanks for posting this one. I’ve combined this with the sidr menu tutorial, they work great. I did also try the jquery-pin but seemed to have a problem with the menu width when resizing from small to large. Unless it only happens when resizing a browser window, idk.

    I was wondering if I could sticky the font awesome hamburger also with this by adding something here: var $filter = $(‘.nav-primary’);

    Even if it wouldn’t work, jquery pin probably would but do most people disable the sticky on tablets or menus?

    Reply

  • Hi Sridhar,
    I have tried to make the header sticky – I have made it. Also with a menu that is not widget.
    Now my problem is that on mobile devices, the header covers whole screen of the phone and pages text can not be seen anymore,
    Hve you any idea on how to make the header NOT to be sticky on mobile devices – or how to make it less height ?

    The website is: http://www.masuratori-cadastru.ro
    ( language is romanian – Romania)

    Thank you !

    Reply

  • Thanks for the great tutorial.
    I followed the tutorials for primary nav, but everything shifts to the left. I want it to be centered.
    Any clue what i am doing wrong.
    Theme – Executive Pro

    Thanks

    Reply

  • Hi Sridhar,

    I followed your instructions and it works flawlessly!!!
    But now I have a simple GIF animation that emphasises the sticky header (I also changed the height of the main navigation). The fact is, that the animation only plays one time: the first time I scroll down. Every other page I visit shows the GIF-animation but ‘freezed’ at the last frame of the animation.
    I want the animation play every time (once) on every page when I scroll the page.
    How can I do that?
    In other words (maybe off-topic), how can I replay the GIF animation on every other page of the website?

    p.s.: Unfortunately I cannot give you a URL, because what I’m working on is on a local server.

    Reply

  • Thanks so much Sridhar. I was hesitant to try this on a site that I use the Dynamik theme, but it was so easy to do. I just had to put the code in the custom js and functions and play around with the CSS a little bit. Probably took less than two minutes and now I have sticky navigation. Thank you!

    Reply

  • I am trying to do the exact opposite, get rid of the sticky navigation that comes with the Magazine Pro child them on top of Genesis. I should be able to edit the style.css file to do this, but I can’t figure out what to edit. The forums have been of no help on this, thanks.

    Reply

  • I’ve turned this into a plugin with additional offset feature:
    http://simonbarnett.co.za/downloads/genesis-sticky-nav.zip

    In Settings -> Genesis Sticky Nav you can set:
    .nav-primary or .nav-secondary
    Active when window is wider than:
    Offset from the top

    There’s a demo here: http://simonbarnett.co.za/tests/sample-page/

    In addition to Genesis Sticky Nav, the demo also has:
    A standard fixed .nav-primary
    A sticky widget area based on a modified version of the Sticky Element plugin (from WordPress repository).
    The modified Sticky Element plugin – “Sticky Element with Offset” – allows for an offset to handle all the sticky/fixed going on. Sticky Element with Offset is available here: http://simonbarnett.co.za/downloads/sticky-element-with-offset.zip

    Reply

  • You are such a rockstar! I just did this literally in about 2 minutes. Keep it coming Sridhar!

    Reply

  • Sridhar,

    Great tutorial; implemented it in just a few minutes. I have two things, one fix for an above user and one question.

    1) A user above mentioned that they had “bold issue in Safari.” I’ve seen this before and correct it by adding the following CSS:
    -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased;

    2) I am using this in Beautiful Pro and have a scrolling issue where the menu “jumps” on the transition. As with the above “bold glitch” it seems to be on Safari, but not on Chrome or Firefox. Any suggestions? My site is here.

    Thanks!

    Reply
    • >