Making your navigation and other elements in the page header responsive is one of the most challenging parts of designing a responsive website.
The header of a web page consists of the section at the top of the page that contains the site’s branding, and usually contains the site’s main navigation as well as supplemental items like form fields or links for search and site login. The header is generally consistent throughout the website.
The components in the header perform two very important functions: they tell the user what site he is on, and they allow the user to navigate through the site.
In this chapter, we’ll go back to our example site and add in some simple navigation styles. Then we’ll look at examples of some common patterns for how navigation can be displayed on mobile-sized screens, and how those navigation layouts will adapt across screen widths.
We’ll also look at how to incorporate site branding, search, and other components into a unified header.
No matter what your responsive navigation looks like, the key is to start with straightforward HTML and then use media queries to change the CSS that styles the navigation, so it looks the way you want it to at different viewport widths.
Using our example site, we’re going to add some basic styles to make our <nav> look like a real navigation, then add a media query to change the navigation style for wider viewports.
We’re going to go back to our narrowest ...
With Safari, you learn the way you learn best. Get unlimited access to videos, live online training,
learning paths, books, interactive tutorials, and more.