So you've seen them on other people's websites and you want to know how you can have one too? The scrolling navigation menu seen on many websites is really easy to replicate in WordPress. Help your readers out, let them click the menu from any point on the page. Here's how...

Step 1 Add a New Menu Area to functions.php

First thing's first, you need a menu to exist in order to display it on the page. Let's create a new one called 'topnavigation'. Here's the most basic code to set up that menu in your functions.php file:

register_nav_menus( array(
	'topnavigation' => __( 'Top Navigation', 'YOUR THEME NAME GOES HERE' )
) );

If you've already got a register_nav_menus function set up, add the 'topnavigation' menu line to that function.

Step 2 Fill Your Boots (And Your Menu)

Go into your dashboard, open up your menus tab. Create a new menu and assign it to the space that you just called 'Top Navigation'. Then fill the menu up with pages. I've just gone for a Home, Store, Events and Blog — you use whatever you like.

Step 3 Call Your Menu

You need to call your menu at the very top of your body in the header.php file. It is very important that you wrap that menu in a wrapper div of your own choosing. I have chosen a div called topnavigation. We'll need to make everything in this div move with the page later. This is the easiest way to do that.

Use the following code in header.php:

<div id="topnavigation">
	<?php wp_nav_menu( array( 'theme_location' => 'topnavigation' ) ); ?>
</div>

That should give you something that looks like this on your page:

Of course, your theme will be different. Mine is just a basic underscores.me install with a simple grid from Get Skeleton.

Step 4 Let's Give It Some style.css

After that we can start styling. So that we can see what we're doing, let's start by adding a bit of CSS to give it a background colour and we want it to be 100% width so that it doesn't look weird when we make it scroll in a moment.

Use the following code in style.css or whatever your stylesheet is called:

#topnavigation {
	width: 100%;
	background-color: #999;
}

Refresh your page and you will (if you've followed) see this:

Step 5 Putting It in the Center

Now we want to make sure that our links are going into the center of that gray bar. So we'll create a nav element around the navigation menu:

<div id="topnavigation">
	<nav><?php wp_nav_menu( array( 'theme_location' => 'topnavigation' ) ); ?></nav>
</div>

Then we need to give that new nav some style. We can do that like so:

#topnavigation nav {
	width: 940px; //the width of your container div might be different
	margin: 0 auto;
}

#topnavigation li {
	display: inline;
	padding: 10px;
	margin: 20px 0;
}

Those two things together will make the nav menu on your page look like this:

Step 6 Fixing It to Scroll

Finally, we are ready to make it scroll. The best way to do that is to fix it to the top of the window and then make it 'hover' above all other elements on the page.

Update your #topnavigation style to look like this:

#topnavigation {
	width: 100%;
	background-color: #999;
	position: fixed; //Stick it to the top of the window
	z-index: 1; //Make it float above all other elements
	height: 50px; //Gives us a reference point for the final thing
}

But if you reload your window, you'll notice that because the navigation is floating, it has allowed all the other content to go underneath it.

To get around that, add a margin to the top of the container div with everything else in it. In my template, that div is called #page. So I'll add this to my CSS file:

#page {
	padding-top: 60px; //The height of my topnavigation div plus a little bit of extra padding for visual pleasure
}

That will leave you with this:

After that, you can feel free to style away the navigation to your heart's content!