Most websites use a horizontal navigation menu. We’re going to focus on transforming this menu into a vertical arrangement (or stack) or responsive web design.
Here is an example of a common navigation menu:
Home | Products | About | Blog | Contact
Transformed for responsive web design, the menu will look like this:
The horizontal arrangement is usually accomplished using an unordered list (
- ), with each navigation menu item inside of a list item (
- ). To accomplish horizontal arrangement or orientation, the “li” element is styled to use display:inline.
By removing display:inline, the navigation menu will transform from horizontal to vertical, which is where it wants to be. Think about what a list looks like, whether it be ordered (
- ) or unordered (
- ). They are always vertical right? A bullet list for example is almost always displayed as vertical. That is it’s natural arrangement.
We’re actually forcing the list, by styling, into an unnatural arrangement by making it horizontal. Once the styling is removed, the list snaps into its natural arrangement.
Once certain screen widths have been identified, we create media queries for them. Then we add our styling that allows list to arrange to their natural state.