Creating a Simple Responsive Navigation menu with CSS

Tutorial to create a Simple Navigation menu from scratch with CSS3 and HTML5. Demonstration included.

Creating a Simple Responsive Navigation menu with CSS

Long gone are the days when people used to build web layouts and navigation with HTML Tables. In modern day web, new techniques to use HTML and CSS have made it more pretty, semantic, as well as adaptive to different screen sizes.

We all know that simple and easy navigation is one of the most important parts of a Web layout. In this post, I’m going to share the most commonly practiced technique to design simple navigation menus with CSS3 and HTML5, and I assume you have the basic idea of using HTML and CSS.

For this, I’m gonna make use of HTML5 nav element (<nav>), unordered lists (<ul>) and hyperlinks, of course.

Simple HTML Navigation Menu with CSS

Basically, this technique moves around HTML lists. We’ll be using simple HTML lists to bring out a simple and easy link list. The concept is to arrange the navigation list horizontally, give the navigation a background, and then add hover effect (lazily changing background) to the links inside it.

The demonstration contains menus in 6 different color themes, but in the tutorial I’m covering only the default presentation only to avoid any kind of trouble for the beginners.

So, lets start with opening our favorite Text editor and write some HTML and CSS. I am, as always, using Sublime Text!.


In the body section of your HTML document, add some hyperlinks within an unordered list (<ul>) and wrap it inside a <nav>. Refer the below given code.

<nav class="nav nav--red">
    <ul class="nav__list">
        <li class="nav__list__item"><a href="">Lorem</a></li><!--
        --><li class="nav__list__item"><a href="">Nobis</a></li><!--
        --><li class="nav__list__item"><a href="">Nostrum</a></li><!--
        --><li class="nav__list__item"><a href="">Quia</a></li><!--
        --><li class="nav__list__item"><a href="">Non</a></li><!--
        --><li class="nav__list__item"><a href="">Voluptate</a></li><!--
        --><li class="nav__list__item"><a href="">Magni</a></li>

Note: While using this code for your website, replace # in the link location with the respective URLs.


So, in our markup, .nav is acting as the main container for out navigation, assigned to an HTML5 navigation element (nav). .nav__list is assigned to an un-ordered list (ul), and will act as the link-list. .nav__list__item is the class assigned to the list-items (li).

As you can see above, I have used classes with pretty much everything (except hyperlinks, it would be too much). Classifying elements keeps you away from the specificity in CSS.

I prefer BEM methodology to name my classes every time I work with CSS.

Another thing you may have noticed in the above markup code are those HTML comment tags. Well, I’m gonna avoid floating our list-items to the left or right, I’ll just be using display: inline-block property with them for the simplicity sake. Those comment tags will remove that tiny space caused by display: inline-block between the elements.

If you still prefer to make your list-items block-level and float them left, you should use the micro clearfix hack to clear the floats.


Now, use the following CSS code inside the style tags in the head section of your code (or in a separate external CSS file, if you prefer).

 * Layout
.nav__list {
    margin: 0;
    padding: 0;
.nav__list a {
    padding: .75em 1.5em;
    transition: all .25s ease-in-out;

.nav__list__item {
    border-style: solid;
    border-width: 0 0 1px;
.nav__list__item a {
    display: block;

 * Desktop-view

@media screen and (min-width: 1024px) {
    .nav__list > .nav__list__item {
        border-width: 0 1px 0 0;
    .nav__list > .nav__list__item,
    .nav__list > .nav__list__item a {
        display: inline-block;

 * Presentation
.nav {
    background-color: #f5f5f5;
.nav .nav__list__item {
    border-color: #e5e5e5;
.nav a {
    color: #555;
    text-decoration: none;
.nav a:hover, .nav a:active, .nav a:focus {
    background-color: #e5e5e5;

Before going to the explanation part, you may see our navigation menu in action using below link:

The Demo


I wrote the CSS following the mobile-first responsive design approach.

So, first, we are zeroing out the padding and margin values for our link-list.

Secondly, we are giving some style and size to the hyperlinks of our link-list. I have added some padding to the links to make them appear rectangular.

Next, making our list-items (<.nav__list__item>) and hyperlinks block-level (display: block) will make them look collapsed on the tablet and mobile view.

I’m also using ease-in-out transition on the links to give them a lazy background transition effect.

Now, to make our navigation not to look collapsed in desktop-view, I’ve used CSS3 media queries and changed the display of our list-items and hyperlinks to inline-block. This makes them look arranged one after the other in a horizontal fashion.

Next, for the better presentation, I added a border-color for the list-items to make them appeared a bit segregated.

I set the text-decoration to none to remove that default underline you see below the hyperlinks.

In the hover state of the hyperlinks, I’ve given the hyperlinks a darker color than that in our navigation background to make hover effects.

And that wraps it up! You may play and experiment further with the CSS properties to make your menu more attractive.

I hope this has helped you to learn something new. If you got stuck somewhere while going through this tutorial, please feel free to post your questions in the comment section below.