Developing responsive navigation

Another critical area for all customers is your navigation—they need to be able to find the products they are looking for easily, after all. Mobiles, tablets, and devices with smaller screens present new challenges in terms of how to present the navigation in a clear way so that users on touchscreen devices will find it easy to interact with.

Firstly, you will need to move the current navigational styling in to the media query for larger screens. So, copy the following CSS code in to the media query you created earlier in this chapter:

@media only screen and (min-width: 50em) {
  #nav li.over{z-index:998}
  #nav a,#nav a:hover{display:block;line-height:1.3em;text-decoration:none}
  #nav span{cursor:pointer;display:block;white-space:nowrap}
  #nav li ul span{white-space:normal}
  #nav ul li.parent a{background: none}
  #nav ul li.parent li a{background-image:none}
  #nav a{color:#333;float:left;font-weight:700;padding:5px 12px 6px 8px}
  #nav ul li,#nav ul li...