Top-Nav (Do Nothing) Pattern

The top-nav pattern is the simplest responsive pattern. It's "do nothing" nickname isn't 100% accurate as you generally need to make a few changes, but those changes are fairly minimal.

Here the main change is to move the navigation from below the logo on smaller screens, to it's right on wider screens. Below 768px both menu and logo are centered and the menu sits below. At 768px and above both logo and menu are floated left and the menu is given a left margin to provide some space in between.

Additional media queries contain styles to adjust the padding of the links as space allows.

The HTML

Here's the html used to create the header of this page.

<header>
  <div class="container">
    <img class="logo" src="images/logo.png" width="252" height="46" />
    <ul id="demo-nav">
      <li><a href="">Back to Post</a></li>
      <li class="current"><a href="top-nav.html">Top-Nav</a></li>
      <li><a href="priority.html">Priority</a></li>
      <li><a href="select.html">Select Menu</a></li>
      <li><a href="select-js.html">Select Menu JS</a></li>
    </ul>
  </div>
</header>
			

The Default CSS

Here's the css that loads by default

header {
  color:#eee;
  background: #2b2726;
  text-align: center;
  padding-bottom: 1em;
}

.logo {
  margin: 1.25em 0;
  width: 200px;
}

#demo-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  font-family: 'helvetica', 'sans-serif';
}
	
#demo-nav li {
  display: inline;
}
	
li.current a {color: #7b7776;}

#demo-nav a {
  color:#fff;
  padding: 0.75em;
  text-decoration: none;
  line-height: 2.5;
  }
	
#demo-nav a:hover {text-decoration: underline;}
			

The CSS in Media Queries

Here's the css included in media queries

@media screen and (min-width: 30em) {
  #demo-nav a {padding: 0.75em 1.75em;}
}

@media screen and (min-width: 42.5em) {
  #demo-nav a {padding: 0.75em 1.1em;}
}

@media screen and (min-width: 52.5em) {
  .logo {float: left;}
  header {padding-bottom: 0;}

  #demo-nav {float: right;}
  #demo-nav a {
    padding: 1.25em 0.75em;
    display: block;
    float: left}
  #demo-nav li:last-child a {padding-right: 0;}
}

@media screen and (min-width: 64em) {
  #demo-nav a {padding: 1.5em;}
}

@media screen and (min-width: 75em) {
  #demo-nav a {padding: 1em 2.25em; line-height: 3em}
}
			

Tips

This pattern works best when you have a limited number of links in your navigation. About 4 or 5 work well. Unfortunately the pattern doesn't scale well. At smaller widths the vertical space to hold the links needs to increases. It quickly grows too great for what we'd prefer on smartphones.

There's also the "fat finger" issue to deal with on small devices. As the links get too close to each other they can be difficult to select individually, which is why we need to increase space vertically.