CSS-Only Responsive Mobile Navigation

This article was originally written for Software Developer’s Journal, Vol. 2 No. 13, 10/2/13

The number of total website traffic is going to increase as data speeds accommodate for the things people want. And they want things fast. With the growth of traffic on mobile devices doubling since last year to 24%, the responsiveness of mobile apps and websites has skyrocketed. It is more important than ever to deliver a usable experience to mobile users.

This tutorial is going to walk you through one of the most practical, functional, and usable ways to deliver navigation menus that users will recognize and find easy to use. Screen real estate is of the utmost importance and not paying attention to your navigation menu can take up a whole lot of it. You will learn a CSS method for turning navigation menus into sleek elements for these smaller screens.

What You Should Know

Since this is a WordPress tutorial, you should know the basics of how navigation menus work in a fresh install. You should also have a basic understanding of how a child theme works and why you should not edit core files of a purchased premium theme or framework. If you wish to dig deeper into this subject, checkout the WordPress Codex: Child Themes. Also, knowledge of HTML, CSS, and media queries are essential.

Before We Start

I personally develop using the Genesis framework for WordPress and build on top of that with custom child themes that I make for my clients. I also develop with progressive enhancement, meaning that users with newer browsers get the best experience while users with older browsers (namely Internet Explorer 8/9 and below) get a usable experience. They won’t know the difference because they aren’t switching browsers and testing the website like we do (which you should be doing).

If you are building your own custom theme or working in another theme, the line numbers mentioned in this tutorial may not match up. The Twenty Twelve and Twenty Thirteen themes already have a navigation system for mobile menus, but we want our own. Since I’ll be using Twenty Twelve as an example, we will be removing these lines for the sake of this tutorial. You will need to look at your theme and adjust what to remove and where to add the new code. This CSS technique can be applied anywhere.

Responsive Mobile Navigation – Let’s Begin

This particular method is very easy to implement. It’s called Navigataur and was put together by Mike King, an Interaction Designer at Ikayzo. Follow him on Twitter: @micjamking.

I’ll be implementing his technique into WordPress by changing selectors in the CSS and updating our header.php with two lines of new markup. Navigataur utilizes an input, a label, and CSS properties to make our navigation mobile friendly. View the Github Repository.

The Markup

Below is some simple markup for navigation that displays with a default WordPress install using the Twenty Twelve theme.

*Note that I have removed classes on the <li> elements to shorten the length of the code for the example.

What we need to do is include two extra elements in the code directly above our menu container. To do this, copy header.php from your parent theme’s folder (in this case it is twentytwelve) and paste it into your child theme’s folder. Always use child themes so you can develop in an upgrade-safe manner.

Now open up your new header.php file in your favorite text editor. In the default install of Twenty Twelve, look for line 43 and delete it. If you’re using another theme, just look for whatever produces the navigation menu and remove it. We want our own markup here:

Here’s a quick explanation

The checkbox input box is hidden in our stylesheet, but when you click the menu it will become ‘checked.’ We will reference the checked state of the input in our CSS with a pseudo-class of :checked. When the input is checked, we will display the navigation menu. Genius.

The label element puts a label on our menu and has two attributes: data-open and data-close. In our CSS, we will target the content property within our selector to change the text on the menu depending on whether it is open or closed.

The content property allows us to add text and images to the markup using only CSS. It’s not really considered markup anymore, but can be styled any way you choose. Note that this property only works with the :before and :after pseudo selectors. Chris Coyier has an awesome post about the content property along with a slew of other tips and tricks.

The CSS

Here’s where all the magic happens — the styles! If you look at the comments, the CSS is broken up into two pieces: essentials for functionality and styles for presentation.

You will have to change the selectors depending on your markup. As always, style the visual properties as you wish. You now have a functional, usable, CSS-only responsive navigation menu that works great on mobile devices.

For now, let’s go through some of the CSS techniques we used above. First is the bugfix at the very top that targets Android 4.1.2 and below. There is a bug in the Android operating system and it doesn’t completely understand the pseudo-class + general selector.

Below that, we are declaring a clearfix hack that gives us a way to contain floats without resorting to using presentational markup. Next, we hide the checkbox input. We also hide the label on viewports higher than 769px. When the viewport of the device (or the width of your browser) is 768px or below, we will display the label and hide the navigation.

When a user clicks on the label, the checkbox becomes checked and then pseudo selectors tell the menu to show and the label to change. You can fancy this up by adding some styles of your own. It’s a very simple approach and is one of my favorites. It can be implemented for large navigation menus with secondary menu items as well. Just add some styling to the nested lists!

The reason I prefer CSS methods like this one is because it doesn’t add a lot of weight to your site like a lot of the jQuery methods out there. If you pay attention to the world of search engine optimization, load times have an impact and building for speed is something everyone should do, if only for speed limitations on mobile networks.

On the other hand, there are a few nice looking jQuery methods out there that look and function really well. That is a tutorial for another day.

View The Demo

A Thank You

I want to give a big “Thank you!” to the editors over at Software Developer’s Journal. Thank you for contacting me to run alongside with some of the big wigs in the WordPress industry.and write tutorials for your fine magazine. I am looking forward to our journey together.

Buy this issue of SD Journal: Building Your Own WordPress Sites From Scratch,

Do you have other CSS-only methods for dealing with mobile navigation?

---