In this section, I'm going to show you how to build three commonly used navigation patterns:
Toggle navigation: This is based on Brad Frost's Toggle Menu demo (http://codepen.io/bradfrost/pen/sHvaz/).
Off-Canvas or Off-Screen navigation: This is based on Austin Wulf's SitePoint Pure CSS Off-Screen Navigation Menu demo (http://codepen.io/SitePoint/pen/uIemr/).
Before we look at the details of each, let's clarify a few features about the mentioned patterns:
On small screens, all navigation patterns use the hamburger icon as a trigger except the Flexbox-based navigation. On large screens, the navigation bar on all examples is a horizontal group of links with centered links.
To improve usability in both the Toggle and the Off-Canvas navigations, the hamburger icon gets the class