Portfolio Structure: Part Three: Hamburger Menu and Slideshow

Using our previous example of a single page, we can add a hamburger menu to the top that is invisible on a browser wider than 550 pixels. When the browser shrinks, the navigation menu disappears and the hamburger appears

Example 1

Create external js file: add function that controls toggle for mainNav
HTML edits: Add link to external js file in head tag; Add hamburger in desired location; Add id tag to main-nav so function can address it
CSS additions: Add hamburger class to wide and narrow browser specs; Add specifications for nav bar in narrow format
To add slideshow: Portfolio with slideshow

Fixed Header Example 1

This example already has a hamburger that appears when the page shrinks, but we have to make the mainNav disappear and then reappear when hamburger is clicked

Create external js file: add function that controls toggle for mainNav
HTML edits: Add link to external js file in head tag; Add id tag to main-nav so function can address it
CSS additions: Add hamburger class to wide and narrow browser specs; Change display to visibility for mainNav