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
See the Demo

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!.

HTML

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">
  <ul class="menu">
    <li class="menu-item"><a href="#">Lorem</a></li>
    <li class="menu-item"><a href="#">Nobis</a></li>
    <li class="menu-item"><a href="#">Nostrum</a></li>
    <li class="menu-item"><a href="#">Quia</a></li>
    <li class="menu-item"><a href="#">Non</a></li>
    <li class="menu-item"><a href="#">Voluptate</a></li>
    <li class="menu-item"><a href="#">Magni</a></li>
  </ul><!-- .menu -->
</nav><!-- .nav -->

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

Explanation

So, in our markup, .nav is acting as the main container for out navigation, assigned to an HTML5 navigation element (nav). .menu is assigned to an un-ordered list (ul), and will act as the link-list. .menu-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: flex property with them for the simplicity sake.

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. Another alternative is to make the list-items inline-block in display.

CSS

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).

/* 1. Menu settings */
.menu {

  /* 1.1 Reset */
  &,
  li {
    margin: 0;
    padding: 0;
  }

  /* 1.2 Sizing-up links */
  a {
    font-weight: 700;
    padding: .75em 1.25em;
    transition: background .25s ease-in-out;
  }
  
  /* 1.3 List-items */
  li {
    position: relative;
    border-width: 0 0 1px;
    border-style: solid;
    &:last-child {
      border-width: 0;
    }
  }
  
  /* 1.4 Default display for menu-items and links */
  li,
  a {
    display: block;
  }
}

/* 2. Screen settings */
@media only screen and (min-width: 1024px) {
  
  /* 2.1 Flex-display of `.menu` for desktop */
  .menu {
    display: flex;
    flex-flow: row wrap;
    
    /* 2.1.1 Border adjustments for menu-items */
    li {
      border-width: 0 1px 0 0;
    }
  }
}

Theming

For theming purpose, you may use the below give snippet or may also alter the above one whatever suits your need the best.

/* Theming */

$menu-color: rgba(white, .75);
$menu-bg: #222;
$menu-item-color: $menu-color;
$menu-item-hover-color: rgba(white, .9);
$menu-item-hover-bg: black;
$menu-item-border-color: lighten($menu-bg, 3%);

.nav {
  background-color: $menu-bg;
}

.menu {
  li {
    border-color: $menu-item-border-color;
    &.menu-item-current {
      
    }
    a {
      color: $menu-item-color;
      &:hover,
      &:active,
      &:focus {
        color: $menu-item-hover-color;
        background-color: $menu-item-hover-bg;
      }
    }
  }
}

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

The Demo

Explanation

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

  1. First, to setup our .menu:
    1. We are zeroing out the padding and margin values for our link-list.
    2. We are giving some size to the hyperlinks of our link-list. I have added some padding to the links to make them appear rectangular and bold. I’ve also added some CSS transition for the background to create a nice hover effect.
    3. We are setting up borders and positioning for our list-items (<.menu-item> or simple li)
    4. We mare making our menu-items and hyperlinks block-level (display: block) that will make them look collapsed on the tablet and mobile view.
  2. Next, we are adding some media breakpoints i.e. styles for different screen sizes (desktop).
    1. We are adding a flex display to our .menu to make the items aligned horizontally. You may play with the justify-content property for different alignments of the menu-items like I’ve done in the demos.
    2. We are adjusting the border-width of the menu-items to show border on the right-side and not on the bottom.

Later, for the better presentation, I added color, background-color, and border-color properties for the list-items to make them appeared a bit styled and 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.