Make a DIY sticky header in Genesis (WordPress)

It’s something that I’ve seen in a lot of websites recently and oddly enough… a client asked me for it just this week.

After gettin’ my nerd on and trying a bunch of convoluted ways to make the header sticky, I DIY’d it and made a super-simple version that I want to share with you… the good people of the Interwebs.


First off… WTF is a sticky header?

A sticky header simply makes your header area visible at all times as the user scrolls down the page. Normally when the user scrolls down, the header goes away. However it’s useful in some situations when there is something in the header that you want to make sure the user always sees, like a newsletter signup or a promotional code, etc….

Here are some examples of (sorta) sticky headers from popular themes on ThemeForest so you get the idea. Click on any thumbnail and scroll down and watch the header area:

Those are just to show you what I mean and I do do NOT recommend you EVER buy a theme (that’s lame), when you can just DIY it with just a few lines of CSS (that’s awesome).

Ready? Let’s do this.


Sticky Header Tutorial

This tutorial is ONLY for WordPress + Genesis + Dynamic Website Builder, if you do not have that combination (you should) do not read further… your head will explode from awesomeness that is about to follow.

Step #1 = Copy & Paste CSS

Copy the CSS below and paste it into Genesis > Dynamik Custom > CSS

Just to make sure you pasting it into the correct place, make sure your screen looks something like this:

With me?  Good!  Now go reload on the front side of your website and scroll down… the header area should now be moving down as you scroll, however things (like your nav menu) might not be lined up correctly / maybe hidden.

To fix this we gotta measure stuff!

If you missed the explanation on how to measure stuff on the web, click that link and scroll half way down

Step #2 = Measure & Update

What you need to measure on your screen is the amount of space (in pixels) between the navigation bar and the top of your browser. To be clear, this is what you need to measure:

For the Web Designers Academy site that measurement is 110px (yours will be different), that’s why in the CSS you copied from above 110px was the number in the

nav-primary class nav.nav-primary {
margin-top: 110px;/
}

So replace that 110px with your number to get things to line up correctly. Your site header (on desktop devices anyway) should now move when you scroll down and everything should be lined up correctly.  

Congratulations!  

However, you are not done!

Step #3 = Tweak For Mobile Devices

Now that things are looking good on desktop, we now need to fix it on mobile.  The good news is that if you don’t have anything in your header right or the site you are making is not responsive for some reason you probably don’t need to do anything else, but keep reading so you understand how it works for the next site you build.

How do you know if you have a problem?  

You could turn on your phone and browse to your website and see how it looks, but there is a better way… just resize your browser down (make your browser window skinnier) and see what happens.

When I do resize my browser down on our About page and the width gets under 1140 px wide, this happens:

Notice how the navigation menu is now sliding under the header?  [shaking fist at sky] Not cool navigation menu… not cool!

It’s hard to tell from a screenshot, but the logo no longer stays centered because we specified a width in our original css.  This would make the header look weird when the screen size gets smaller.

The reason why all this is happening is because responsive design is kicking in and things are beginning to shift/move around on smaller screens.

To fix the menu issue, we need to measure the amount of space (in pixels) between the navigation bar and the top of your browser (just like we did in Step #2) but make sure you keep your browser width skinnier so you can see the problem.

So now we know that the new height of that area is 140px when the browser width becomes 1140 pixels wide… but what do we do with that information?  

We need to put it where responsive design CSS goes and that is in Genesis > Dynamik Design > Responsive. When you go there you’ll notice that there are 6 boxes where you can paste in CSS code and each box refers to different screen width.  

For example the 2nd box from the right kicks in when the screen size is between 480 px wide and 900 px wide:

sticky-header-responsive-box-location

and clicking around you’ll notice that each of the 6 boxes kick in at different browser widths. Since the header problem is happening when the width of my browser gets under 1140 px wide, I’m going to find the box that controls that width (note: boxes that control larger screen widths are towards the left, smaller screen sizes are towards the right).

It turns out that the second box from the LEFT controls that width.

Just to make sure you understand why this is the correct box: the issue started to happen when my browser went a little bit smaller than 1140… so the problem happens at 1139 px wide which is in between 1140 and 840, so this is the correct box.

Now all we’ve gotta do is paste in NEW CSS code that will kick in when the browse is in between those two width.   The CSS code not only needs to use our new height measurement (140px tall), but also needs to addresses the header width now shrinking with the browser and all that is easily done with these 2 lines:

Simply take those two lines and paste them into that box, so your screen should look like this:

Once saved, go take a look at your website with a slightly smaller browser width and the spacing and header should all be pretty again, like this:

Looks good right? Hells yeah it does!

Step #4 = Keep Tweaking For Mobile

Here’s the part that gets tricky… depending on how you have your site setup you might be done at this step OR you might need to continue measuring the entering the new height into the different boxes.

Here on Web Designers Academy we could stop at this step, but that might not be true for you.

So keep resizing your browser down, keep looking for problems, keep adding that CSS to the different boxes and the end result will be a sticky header that looks gorgeous on all devices!

Your friends,
Amy & Ian Anderson

PS: I really hate shaving and this alpaca feels my pain