Navigation menus are changing. Instead of just throwing one into a site without considering what form it’ll take, designers are taking the time to consider the design of navigation menus, the space they take up on the page, and how users interact with them.
One growing trend is for sticky menus. These are menus that stay at the top of the browser window when the user scrolls down.
This way, however far the user moves down the page, the menu will still be accessible, making it easier for people to navigate around the site.
In this tutorial, you’ll learn when to add (and not to add) a sticky menu, and how to add the code to your theme.
When To Use Sticky Menus
Sticky menus aren’t always ideal. They’re best used on small, one-line menus with no submenus, that sit at the top of the page.
Here are some examples of effective sticky menus.
The apple website has a simple menu with no drop-down elements. It takes up very little space at the top of the page so is an ideal candidate for a sticky menu.
The Ted Baker site also has a one-line menu which is sticky. In this case, the site uses a mega menu so it expands when you hover over one of the elements.
But there are cases where a sticky menu wouldn’t work. For example, the Guardian website has a large header with the menu below that. If the menu was made sticky, it would mean that it and the header took up way too much of the screen space.
The IBM site features a menu at the top of the screen with drop-down elements. This site doesn’t use a sticky menu, probably because of the drop-downs, which don’t always work well when added to a sticky menu.
The best time to use a sticky menu is when your navigation menu is at the top of the screen and is a simple, one-line menu. As you can see from the examples above, this can work with a mega menu but you do need to handle that with care. If the user accidentally hovers over a sticky menu while scrolling down, and suddenly the mega menu appears, it won’t make for the best user experience.
Adding a Sticky Menu to Your Theme: Getting Started
Now let’s look at the code you need to use to make your navigation menu sticky.
You’ll need:
- A theme you can edit (see below).
- A development installation of WordPress—don’t try this on your live site!
- A code editor.
- Access to your theme files.
I’m going to be working on a theme I developed myself. If you’re using a third party theme, make sure you create a child theme and add any edits to that. If you edit the third party theme itself, you’ll lose your changes next time you update it.
The Starting Code
Here’s the site I’m going to be working on:
If I scroll down, the menu disappears:
I want to edit the CSS for the menu so that it stays at the top of the page when scrolled.
Here’s the code that adds my menu to the site, which is in the header.php file of my theme:
<div class="header-bg">
<header role="banner">
<hgroup class="site-name one-third left">
<!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
<h1 id="site-title" class="one-half-left">
<?php if ( is_singular( array( 'rmcc_landing', 'rmcc_signup') ) || is_page_template( 'page-tripwire.php' ) ) {
bloginfo( 'name' );
}
else { ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
<?php } ?>
</h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<div class="right two-thirds">
<!-- This area is by default in the top right of the header. It contains contact details and is also where you might add social media or RSS links -->
<?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ?>
<a class="toggle-nav" href="#">☰</a>
<?php } ?>
<!-- navigation menu -->
<?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ?>
<nav class="menu main right">
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'compass' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
</nav><!-- .main -->
<?php } ?>
</div> <!-- .one-half right -->
</header><!-- header -->
</div><!-- header-bg-->
This code contains a number of elements:
- the background to the navigation and header, which is full-width
- the header element itself, which has CSS for width
- the site title and description
- the navigation menu
It uses CSS from my theme for layout, floats and colours, such as the .right and .left classes for floats.
Here’s the CSS for the main elements of that header banner:
.header-bg {
background: #21759B;
}
header {
margin: 0 auto;
width: 96%;
max-width: 1200px;
clear: both;
padding-bottom: 1em;
}
The elements that are floating next to each other (the site title and description and the menu) use CSS for floats and width that’s not specific to these elements:
.one-third.left {
margin: 0 1% 0 0;
float: left;
}
.two-thirds.right {
margin: 0 0 0 1%;
float: right;
}
Your styling will be different from this but will include styling for backgrounds, widths and floats in some form. If you’re creating a child theme for a third party theme, take some time to look over the existing stylesheet so you know what you’re targeting with your child theme CSS.
Making the Menu Sticky
Now let’s add the code to make our menu sticky. The element I want to target is the .header-bg element, which contains everything else.
In your theme, find the element that represents the menu background or the menu itself if it isn’t wrapped inside anything else. There may well be a header element involved somewhere. This is why it pays to use a development installation of WordPress—you may need to experiment!
Once you’ve found the top-level element that needs to stick to the top of the page, add this to it:
.header-bg {
position: fixed;
top: 0;
width: 100%;
}
This does the job for fixing the menu to the top of the page, or making it sticky:
However there is a problem. The menu is overlapping the content below it, at the top of the screen. When I scroll down this isn’t apparent, but when I scroll up to the top of my screen, the first line of text is hidden.
This is because the .fixed positioning for the menu has taken it out of the normal flow of the HTML as it’s rendered, meaning that the browser renders whatever HTML comes next at the top of the screen.
Let’s fix it. To do this, we need to add a margin to the top of the next element which is a div with the class of .main. We also need to set a height for the sticky menu to ensure it will be equal to that margin.
To get this right, I need to interrogate the CSS for the elements inside the .header-bg element, so I can find out how the height is being computed.
The .header-bg and the header elements don’t have height set, and have top and bottom padding and margins of zero. If I drill down further, I can find padding for list items within the menu:
#menu-navbar li {
padding: 1em 5px;
margin: 0;
}
The font size for the text is the same as for the body element, so we can take that as 1em. Which gives us a total height of the header bar at 3em.
Here’s the adjusted CSS:
.header-bg {
position: fixed;
top: 0;
width: 100%;
height: 3em;
}
div.main {
margin-top: 3em;
}
Note that I’ve overqualified div.main instead of using .main. This is because this theme also uses the .main class on the main menu (nav.main). Whether this is necessary for you will depend on the way your theme’s coded.
The menu now appears above the content as it should:
And when I scroll down, the menu (and the rest of the header) stays fixed in place:
So that’s how you make your navigation menu sticky!
A Sticky Menu Can Enhance User Experience and Modernise Your Site
If your site has a simple menu at the top of the screen, making it sticky using this technique will make it easier for users to access it and navigate around your site, wherever on the screen they are.
But if your menu is very large, or it’s below header elements that will take up too much space, a sticky menu may take up too much space on the screen and detract from user experience.
It’s your call—but a sticky menu is easier to add than you might think.