How to Create a Responsive Navigation

One of the trickiest parts to be responsified on a website is “the Navigation”, this part is really important for the website accessibility, as this is one of the ways visitors jump over the web pages.

However, rather than applying an instant solution, in this post, we are going to walk you through on how to build a simple navigation from the ground and using the CSS3 media queries and a little jQuery to display it in a small screen size like the smartphones properly.

Styles

In this section, we start styling the navigation. The style here is only decorative, you can pick any colors as you desire. But in this case, we (I personally) want the body to have a soft and creamy color.

body {
background-color: #ece8e5;
}

The nav tag that define the navigation will have 100% full width of the browser window, while the ul where it contains our primary menu links will have 600px for the width.

Then, we will float the menu links to the left, so they will be displayed horizontally side by side, but floating an element will also cause their parent collapse.

nav li {
display: inline;
float: left;
}

If you notice from the HTML markup above, we’ve already added clearfix in the class attribute for both the nav and ul to clear things around when we float the elements inside it using this CSS clearfix hack. So, let’s add the following style rules in the style sheet.

The menu links will be separated with 1px right border, except for the last one. Remember our previous post on box model, the menu’s width will be expanded for 1px making it 101px as the border addition, so here we change the box-sizing model to border-box in order to keep the menu remains 100px.

…and then, we also define how the navigation is displayed when the screen get smaller by 480px or lower (so this is our second breakpoint).

In this screen size, the extra link that we’ve added before will start visible and we also give the link a “Menu” icon on its right-side using the :afterpseudo-element, while the primary menu links will be hidden to save more vertical spaces on the screen.

However, when you resize the browser window right after you’ve just viewed and hid the menu in a small screen, the menu will remain hidden, as the display: none style generated by the jQuery is still attached in the element.

So, we need to remove this style upon the window resizing, as follows:

Alright, that’s all the codes we need, we can now view the navigation from the following links, and we recommend you to test it in a responsive design test tool, such as the Responsinator, so that you can view it in various width at once.

Bonus: An Alternative Way

As we have mentioned earlier in this post, there some other ways of doing it, and using a JavaScript library called SelectNav.jsis one of the easiest way. This is a pure JavaScript that is not relying on another third party library like jQuery.

Basically, it will duplicate your list menu and transform it into a <select> dropdown menu, then you are able to choose which one is hidden or shown depending on the screen size through media queries.

One of an advantage I like on this practice is that we don’t have to worry on the navigation style as the <select> menu will make use of the native user interface from the device itself.

Conclusion

We have come through all the way to create responsive navigation from scratch. This one we have created here is just one of examples, and as we stated earlier in this post and shown above, there are many other solutions you can implment. So, it is now leave to your decision to pick which practice that best fit to cater requirement and your web site navigation structure.