Header 6

Created: August 23, 2022

Modified: August 23, 2022



  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


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.

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.

Bricks version

Support our work

Consider a small donation
If you have any comments please let me know, support my work and leave a small donation so I can develop several more templates and keep Bricks Design Set free for everyone.