There are a large number of ways to do responsive navigation. This page contains three examples from CodePen and then links to some sites that offer navigation examples that you can copy and paste.
If you use one of these, add links to it in your Designed By page.
Example 1: Responsive Nav Title and Navigation
In this example the site title is the first link in the navigation. It is adapted from W3 Schools.
https://codepen.io/profstein/pen/eezWmZ
See the Pen Responsive Navigation: Title and Nav by Christopher Stein (@profstein) on CodePen.
Alternate Version
This version separates out the Site title, nav and hamburger menu into separate items and also slides the nav down smoothly.
https://codepen.io/profstein/pen/VwzbJYE
See the Pen Responsive Navigation: slide down by Christopher Stein (@profstein) on CodePen.
Example 2: Responsive navigation with menu button
In this example the menu is a button that reads “menu” when the screen is small. On larger screens the button is replaced by horizontal navigation.
https://codepen.io/profstein/pen/NOjmgW
See the Pen Responsive Navigation with Modernizr by Christopher Stein (@profstein) on CodePen.
Example 3: Responsive Navigation – Pin to top -with menu button
This is just like Example 2 except that the horizontal navigation on large screens is pinned to the top of the screen.
https://codepen.io/profstein/pen/RwNrZXd?editors=0100
See the Pen Responsive Navigation – Pin to Top with Modernizr by Christopher Stein (@profstein) on CodePen.
Example 4: Responsive Navigation with Image
In this example there is an image that serves as both the logo and the link to the home page. This one also has two separate nav elements, one for mobile and one for other screens. You will need to remember to change both navigations if you change either. Having two nav can be useful however if you want to style the mobile navigation list and the larger screen navigation list very differently.
https://codepen.io/profstein/pen/gObOzzw
See the Pen Responsive Navigation with image by Christopher Stein (@profstein) on CodePen.
Example 5: Off-Canvas (left) Menu
This example the menu slides in from the left side of the screen. It is also a pure CSS nav menu with no JavaScript
https://codepen.io/profstein/pen/WdxPWd
See the Pen Menu Off-Canvas (Pure CSS) by Christopher Stein (@profstein) on CodePen.
Links to Navigation Sites
These sites each offer a navigation. They have code you can use and examples that you can see.
- Responsive Nav: http://responsive-nav.com/
- Flexbox Navigation: https://css-tricks.com/flexbox-bar-navigation/
- Side Navigation: https://www.berriart.com/sidr/
