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.active{background:#e57d04;float:none;margin:0;padding-bottom:1px}
#nav ul li.last{padding-bottom:0}
#nav ul a,#nav ul a:hover{background:none;float:none;padding:0}
#nav ul li a{background:#fff;font-weight:400!important}
#nav ul,#nav div{border:1px solid #ccc;left:-10000px;position:absolute;top:27px;width:15em}
#nav div ul{border:none;position:static;width:auto}
#nav ul ul,#nav ul div{top:5px}
#nav ul li a:hover{background:#e57d04}
#nav ul li a,#nav ul li a:hover{color:#333!important}
#nav ul span,#nav ul li.last li span{padding:3px 15px 4px}
#nav li ul.shown-sub,#nav li div.shown-sub{left:0;z-index:999}
#nav li .shown-sub ul.shown-sub,#nav li .shown-sub li div.shown-sub{left:100px}
#nav li.active a,#nav li.over a,#nav a:hover{color:#e57d04}
}Next, you can define some styles inside a new media query to style how the navigation appears for devices with smaller screens:
@media only screen and (max-width: 49.99999em) {
#nav a {
color: #333;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
}
#nav a:hover {
color: #aaa;
text-decoration: underline;
}
#nav ul {
display: inline;
}
#nav li {
display: inline;
float: left;
margin: 0 1%;
}
#nav ul.level0 {
display: inline;
}
#nav ul.level0 li {
float: none;
width: 100%;
}
#nav ul.level0 a {
color: #777;
font-size: 0.9em;
}
}Including the CSS in a media query for screen widths less than 49.9999em means that this CSS won't clash with the other CSS for drop-down navigations for larger screens. This is shown in the following screenshot:
On a device with a smaller screen, the navigation is displayed as you defined it in the smaller media query, making it easier for customers to find their desired product category.
