27 Comments

  1. carrie dils

    Nice, nice! I’ve seen lots of approaches to this, but yours is the cleanest. I’m gonna stop crying and do some math. 🙂

  2. Iven Music

    thanks for the great help, but i have this problem where the main page the header is fixed and all good and when i go to any other page it get missed up kalimira-music.com/test/

  3. Nur Ahmad Furlong

    Thanks for this nice little tip. Just something I needed. I noticed your header remains the same height across responsive layouts. Any ideas for a header with changing height?

    1. FAT Media

      When the height changes, you’ll need to adjust the padding offset on the body element. The easiest way is to just use Firebug or Chrome Dev Tools to change it visually and add the changes in your different media query breakpoints. Another option would be to use jQuery to calculate the offset added to the body element on the fly, but that’s a little more involved than I can cover in these comments.

      You may have also noticed that we disable the sticky header on mobile devices. Personally, I find sticky headers to be pretty annoying on a phone. You’re already dealing with limited screen real estate as it is. At the very least, you’d probably want to make the sticky header very small on mobile screens. 🙂

  4. ruthieou

    I’m in LOVE with the fixed header and this post. Seriously, I want to use it on sites that probably don’t need. Thanks for the tutorial.

  5. Keesjan Deelstra

    Great tutorial. on mobile the fixed header is not there (witch is great, it would consume too much space). How do you manage that?

  6. Dragan Nikolic

    Hey guys, there’s a plugin for those not so comfortable editing their stylesheets. It’s called Sticky Header and you can find it in the WordPress.org repository http://wordpress.org/plugins/sticky-header/

    I would really like to hear how it handles themes built on Genesis framework, so if some of you decide to try it, a feedback is welcome.

    1. Graham Getty

      Dragan – the Sticky Header Plugin works great on my Genesis site. Below is a link to a screencast showing how I used the Stick Header Plugin with my Genesis Theme (Executive Pro). Thanks so much for the plugin. Robert’s coding instructions are awesome, but a bit beyond what I’m comfortable doing. Here’s the link: http://resolvedllc.com/sticky-header-plugin-and-genesis-themes/

  7. Paul

    Hi,

    Thanks for the tutorial there, it works really nicely!

    My only problem is I’m trying to combine it with menu page jumps, and the page scrolls down so the top of the browser is flush with the link, but the fixed header obscures the top of the text. Do you know a way round this?

    Thanks

  8. Sharon

    This is awesome but the primary & secondary menus completely disappear under the header area on Mobile. I haven’t tried the toggle menu option (I prefer not to use that with some of my themes)… do you have any suggestions?

    1. Sharon

      Ok scratch that – I see you recommend disabling this for Mobile — how? 🙂

  9. LE

    Thank you this worked easily. Most of my site is white so i would like a shadow under the header. Any style i can add to accomplish this?

  10. LE

    How would i make this shadow appear only when the user scrolls? Thanks.

  11. miroquai

    Recently I created simple plugin for WordPress called myStickymenu…It’s based on java script which ad’s .myfixed class on scroll to any predefined element (menu or header). All you need to do is to enter class or id of an element desired to be sticky… Than you can customize it more with plugin css editor using .myfixed class to create different style while sticky if needed. (You can add shadow or different colors when user scrolls)

    Hope this helps, I didn’t test it on Genesis Framework yet, any feedback would be appreciated. Plugin can be found here: http://wordpress.org/plugins/mystickymenu/

  12. khedma

    Looks amazing, but i wish there was a demo to check out the results before actually implementing the code, Thanks a lot.

  13. Technoyl

    Thankx dude, this worked like a charm. Using same way, I made the footer static too!

  14. James

    Thanks for the great article – been searching for ages & your solution worked the best. Just one question, how do you disable the fixed header for mobile? Thanks

Comments are closed.