Structure

1. Header 6 Mobile Only Navigation
   1. Container Center
      1. Touchpoint
         1. Hamburger Wrapper
            1. Nav Menu
   2. Container Right | .mobile-nav-container
      1. Icon Right | .mobile-nav-icon
   3. Container Left | .mobile-nav-container
      1. Icon Left | .mobile-nav-icon
2. CSS and JS

Information:

Execute code “CSS and JS”

For the 1. “Header 6 Mobile Only Navigtion” change ‘Position’ to fixed!
Desktop Breakpoint set ‘Display’ to none.
Mobile Landscape set ‘Display’ to flex

Container Center contains custom css for the transparant effect around the hamburger menu. The Icons has a link where you can change it to your settings.

Author:
Features custom JS to hide the header when scroll position has reached the bottom of the viewport, so that the footer and other content is not obscured. Also, you can position any of the 3 containers in any column and the layout will automatically adjust. This is done by setting the flex order.