Responsive Navigation

Note

Since this class is delivered to an international audience and some students may have limited access to stream long videos, I will adopt a lecture format that moves quickly and shortens the overall length and download size of the video clip. You may have to pause the video frequently while watching.

Overview

In this lab we will explore small screen hamburger navigation with horizontal navigation for larger screens.

• document.querySelector()
• addEventListener
• classList.toggle()
• ::before {}
• content: ""

Resource Links

• Trigram for Heaven ☰ Entity
• A Complete Guide to Flexbox
• Navigation and Wayfinding
• A Complete Guide to CSS Grid

Watch

• Responsive Navigation Part 1 [8:22] Build the small screen navigation
• Responsive Navigation Part 2 [3:28] Build the larger screen navigation
• Responsive Navigation Part 3 [1:14] Enhance small screen with different icons for open and closed
• Responsive Navigation Part 4 [2:48] Use CSS position to move the hamburger around the screen
• Responsive Navigation Part 5 [3:37] Animate opening and closing the small screen menu