Creating a “Sticky” Navigation Bar with Headway

VIEW the DEMO

PROBLEM: Your navigation is one of the most important parts of your website. It’s how your visitors get from the homepage to other parts of your site! But once they scroll down to read your content, they can’t see the navigation anymore – and darn it, you want them to see it all the time!

SOLUTION: A sticky navigation bar. You see them all the time (not a Headway site), but how to implement? No worries; it’s actually pretty easy!

Step 1: Set up a WordPress & Headway site with a navigation bar.

Yeah that’s as easy as it sounds. If your site is already completed or in progress, you probably have a navigation bar. If you don’t, go ahead and add a navigation block now.

Step 2: Add a little jQuery Magic

This jQuery script is pretty well commented, but here’s the gist of it:

1. Hi webpage! Are you being displayed on a mobile device? If you are, we won’t make the navigation sticky because dang, a sticky nav on a mobile device takes up too much room. Oh, you aren’t? Fabulous.
2. Oh, the window is scrolling! That’s my cue. I’m looking for the .block-type-navigation class. You got one? You do? Fabulous! I’d like to add  a class to it, please. Thanks!
3. Whoops, you scrolled back up the top. Let’s remove that class, huh? Thanks!

Basically once you scroll down, we are sticking the navigation to the top of the page & making it super obvious to the user that Hey! You! Can! Navigate! There’s more to see!

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
 //STICKY NAV
 var isMobile = {
 Android: function() {
 return navigator.userAgent.match(/Android/i) ? true : false;
 },
 BlackBerry: function() {
 return navigator.userAgent.match(/BlackBerry/i) ? true : false;
 },
 iOS: function() {
 return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
 },
 Windows: function() {
 return navigator.userAgent.match(/IEMobile/i) ? true : false;
 },
 any: function() {
 return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
 }
 };
//Calculate the height of <header>
 //Use outerHeight() instead of height() if have padding
 var aboveHeight = $('.top-row').outerHeight();

 //when scroll
 $(window).scroll(function(){

 //if scrolled down more than the header’s height but this isn't mobile
 if ($(window).scrollTop() > aboveHeight && !isMobile.any()){

 // if yes, add “fixed” class to the <nav>
 // add padding top to the #content 
 // (value is same as the height of the nav)
 $('.block-type-navigation').addClass('fixed').css('top','0').next()
 .css('padding-top','42px');

 } else {

 // when scroll up or less than aboveHeight,
 // remove the “fixed” class, and the padding-top
 $('.block-type-navigation').removeClass('fixed').next()
 .css('padding-top','0');
 }
 });
});
</script>

A Note on Loading jQuery

This code goes straight into the Header Scripts area of Headway -> Options. The first line ensures that jQuery is being loaded. If you are using a child theme & can load the script via the wp_enqueue function, that’s the preference and you can skip that line!

You could also skip the first script line in the code above (and start at the second < script >
tag), and put this line of code in the Footer Scripts area instead to load jQuery more cleanly. This will prevent jQuery from being loaded twice (and could fix any potential errors).

<?php
wp_enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js', false, false, true);
?>

Two Additional Notes!

Multiple Navigation Blocks: As written, it is going to affect *all* of your navigation blocks. SO if you have two of them on a page, it’s going to look for both! If you want only one of the navigation bars to be affected however, that’s no problem. Just add a custom class to your navigation block (open up the Block Options for the navigation block, and add something in the Config -> Custom Classes input). Then you’ll replace .block-type-navigation with .[yourClassGoesHere]. So if you gave your block a class of stickyNav, your jQuery code would read something like: $(‘.stickyNav’).addClass(‘fixed’).css(‘top’,’0′).next() instead of $(‘.block-type-navigation’).addClass(‘fixed’).css(‘top’,’0′).next(). Remember, there are two places this gets changed in the script!

Taller Navigations Blocks: By default this script is set for a navigation block that is around 42px high. If your navigation block is taller/shorter and this isn’t behaving the way you expect it to, change the line that says “ .css(‘padding-top’,’42px’);” — you’ll change 42 for the height of your navigation block.

Step 3: Add a Little Custom CSS Magic

Finally we need just a teeny little bit of CSS to make this look fabulous & for it to stick! In Design Mode, open up the Live CSS Editor and drop in this code:

.fixed {
     position:fixed !important;
      left: 0;
      text-align: center;
}
.fixed .block-content {
      display: inline-block;
      text-align: left;
      width: 940px; /* This should be the width of your grid!!! */
      float:none;
}

The only part of this you’ll need to change is the width — that should be equal to the width of your grid.

Step 4: You’re done!

Aside from lording it over your friends that you just created a sticky nav … you’re all set! Post your site in the comments so we can see how great your site looks!