Navigation 5

Breakpoint is limited based on your device or window size.

<header class="navigation-05b header" data-test="main-header" id="main-header">
  <div class="wrapper">
    <div class="header-top-bar grid-container grid-x align-middle">
      <div class="large-2 medium-3 small-9 cell">
        <a class="logo-holder">
          <img class="logo" src="/assets/images/logo/web-blocks-logo.png" alt="logo" />
        </a>
      </div>
      <div class="large-4 medium-3 small-0"></div>
      <div class="show-for-large large-6 medium-6 small-12 cell text-right">
        <div class="shrink cell topbar-links">
          <ins-button solid icon="icon-user" label="Sign In">
          </ins-button>
          <ins-button class="hide-for-small-only" solid label="Go To Website">
          </ins-button>
          <div id="desktop-drawer-menu-btn" class="icon-menu-1"></div>
        </div>
      </div>
      <div class="hide-for-large mobile-menu-toggle large-0 medium-6 small-3 cell vertical-align-middle align-right">
        <div id="mobile-menu-btn" class="icon-menu-1"></div>
      </div>
    </div>
  </div>
</header>

<ins-drawer label="" show-close-button="false" position="left" class="blocks-header-drawer-05b"
  id="header-block-05-drawer">
  <div class="wrapper">
    <div class="grid-container">
      <div class="spacer x-large"></div>
      <div class="grid-x">
        <div class="small-12 cell align-right text-right">
          <ins-button label="" id="close-block-drawer-05" icon="icon-close" solid color="blue" class="square"
            size="normal">
          </ins-button>
        </div>
      </div>

      <div class="spacer xxx-large show-for-medium"></div>
      <div class="spacer large hide-for-medium"></div>

      <div class="grid-x">
        <div class="large-3 medium-6 small-12 cell text-left">
          <ul class="menu vertical">
            <li>
              <a class="color-font-head" data-test="">About</a>
              <div class="spacer large"></div>
            </li>
            <li>
              <ins-dropdown lined label="Products" link="#" target="_self" id="nav-05-products-toggle">
                <ul class="menu vertical sub-menu">
                  <li>
                    <a class="color-font-head" data-test="">Lifestyle</a>
                    <div class="spacer large"></div>
                  </li>
                  <li>
                    <a class="color-font-head" data-test="">Running</a>
                    <div class="spacer large"></div>
                  </li>
                  <li>
                    <a class="color-font-head" data-test="">Walking</a>
                    <div class="spacer large"></div>
                  </li>
                  <li>
                    <a class="color-font-head" data-test="">Training & Gym</a>
                    <div class="spacer large"></div>
                  </li>
                  <li>
                    <a class="color-font-head" data-test="">Sports</a>
                    <div class="spacer large"></div>
                  </li>
                </ul>
              </ins-dropdown>
              <div class="spacer large"></div>
            </li>
            <li>
              <a class="color-font-head" data-test="">Order</a>
              <div class="spacer large"></div>
            </li>
            <li>
              <a class="color-font-head" data-test="">Returns</a>
              <div class="spacer large"></div>
            </li>
            <li>
              <a class="color-font-head" data-test="">Membership</a>
              <div class="spacer large"></div>
            </li>
          </ul>
        </div>
        <div class="large-9 medium-12 small-12 cell text-right">
          <h3>Get in touch</h3>
          <div class="spacer x-large"></div>
          <div class="contact-info">
            <h4>Contact Number</h4>
            <div class="spacer x-small"></div>
            <p>+1 5204674837</p>
          </div>
          <div class="spacer x-large"></div>
          <div class="address-info">
            <h4>Address</h4>
            <div class="spacer x-small"></div>
            <p>
              1 Insites Street, <br>
              Melbourne, VIC 3000, Australia
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</ins-drawer>

Place the code below into a separate partial for the mobile menu:

<div class="navigation-05b drawer-holder">
  <ins-drawer no-padding id="mobile-menu" show-header=false position="right">
    <div>
      <ul class="vertical menu">
        <!-- normal list -->
        <li class="no-submenu">
          <a href="/item-1-link">
            Shipping and Delivery
          </a>
        </li>
        <!-- /normal list -->  

        <li>
          <ins-accordion menu>
            <ins-accordion-item heading="Products" link="#" open-icon="icon-plus" close-icon="icon-minus"
              class="has-subitems">
              <ins-accordion-link label="Lifestyle" link="#">
              </ins-accordion-link>

              <ins-accordion-link label="Running" link="#">
              </ins-accordion-link>      
              
              <ins-accordion-link label="Walking" link="#">
              </ins-accordion-link>

              <ins-accordion-link label="Training & Gym" link="#">
              </ins-accordion-link>

              <ins-accordion-link label="Sports" link="#">
              </ins-accordion-link>

            </ins-accordion-item>
          </ins-accordion>
        </li>

        <!-- normal list -->
        <li class="no-submenu">
          <a href="/item-1-link">
            Orders
          </a>
        </li>
        <!-- /normal list -->     
        
        <!-- normal list -->
        <li class="no-submenu">
          <a href="/item-1-link">
            Returns
          </a>
        </li>
        <!-- /normal list -->     

        <!-- normal list -->
        <li class="no-submenu">
          <a href="/item-1-link">
            Membership
          </a>
        </li>
        <!-- /normal list -->     

        <!-- normal list -->
        <li class="no-submenu">
          <a href="/item-1-link">
            Go to Website
          </a>
        </li>
        <!-- /normal list -->     
        
        <!-- phone -->
        <li class="no-submenu">
          <a href="/item-1-link" style="padding-bottom:0">
            Contact Number
          </a>
          <a class="color-font-link phone-email" href="tel:617240387322" data-test="phone-link-mobile" 
          style="padding-top:0">
            +1 520 467 4837
          </a>
        </li>
        <!-- /phone -->

        <!-- phone -->
        <li class="no-submenu">
          <a href="/item-1-link" style="padding-bottom:0">
            Address
          </a>
          <a class="color-font-link phone-email" href="tel:617240387322" data-test="phone-link-mobile" 
          style="padding-top:0">
          1 Insites Street, <br />Melbourne VIC 3000 Australia
          </a>
        </li>
        <!-- /phone -->

      </ul>
    </div>
  </ins-drawer>
</div>
 
/* Start: Overwrite - Foundation Grid Container*/
.blocks-header-05 .grid-container{
  padding-left: 0px;
  padding-right: 0px;
  max-width: var(--container-max-width, 1232px);
  position: relative;
}
/* End: Overwrite - Foundation Grid Container*/

.blocks-header-05.fixed{
  display: block; 
  position: fixed; 
  z-index: 999; 
  background: #FFF; 
  width: 100%;
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); 
  transform-style: preserve-3d;
}

.blocks-header-05 #desktop-drawer-menu-btn,
.blocks-header-05 #mobile-menu-btn{
  color: var(--color-font-head, #2B2B2B);
  font-size: var(--typography-x-large, 1.5rem);
  cursor: pointer;
}
.blocks-header-05 #desktop-drawer-menu-btn{
  padding-left: 56px;
}
.blocks-header-05 #mobile-menu-btn{
  padding-left: 24px;
}

/* Drawer Inner */
.blocks-header-drawer-05 .menu.sub-menu a{
  font-weight: 400;
  color: var(--color-font-body, #595959);
}

.blocks-header-drawer-05 .menu li, 
.blocks-header-drawer-05 .menu a{
  font-size: var(--typography-medium, 1rem);
  padding:0px 0px;
  display: block;
}


.blocks-header-drawer-05 .contact-info h4,
.blocks-header-drawer-05 .address-info h4,
.navigation-05 ins-drawer#mobile-menu .contact-info h4,
.navigation-05 ins-drawer#mobile-menu .address-info h4{
  font-size: var(--typography-large, 1.125rem);
}

.blocks-header-drawer-05 .contact-info a,
.navigation-05 ins-drawer#mobile-menu .menu li .contact-info a{
  padding: 0px 0px 0px 0px;
}

/* Start: INS Components Overwrite - Accordion */
.blocks-header-drawer-05 .ins-accordion.menu ins-accordion-item:first-of-type .ins-accordion-item_header{
  border: none;
}
.blocks-header-drawer-05 .ins-accordion.menu .ins-accordion-item .inner-head:hover{
  background-color: rgba(255, 255, 255, 0);
  color: var(--color-main, #116EC3);
}
.blocks-header-drawer-05 .ins-accordion.menu .ins-accordion-item.open>.ins-accordion-item_header>.inner-head:hover{
  background-color: rgba(255, 255, 255, 0);
  color: var(--color-main, #116EC3);
}

.blocks-header-drawer-05 .ins-accordion-item_header>.inner-head,
.blocks-header-drawer-05 .ins-accordion-item.open>.ins-accordion-item_header>.inner-head{
  background-color: rgba(255, 255, 255, 0);
  color: var(--color-font-head, #2B2B2B);
  border: none;
  font-size: var(--typography-medium, 1rem);
  font-family: var(--font-family-03, sans-serif);
  line-height: var(--typography-x-large, 1.5rem);
  padding-bottom: 32px;
}

.blocks-header-drawer-05 .ins-accordion-item_header_caret-wrap{
  position:relative;
  display: inline-block;
  right: 0px;
  vertical-align: text-top;
}

.blocks-header-drawer-05 .ins-accordion-item.closed>.ins-accordion-item_header>.inner-head>.ins-accordion-item_header_caret-wrap>.open-icon,
.blocks-header-drawer-05 .ins-accordion-item.open>.ins-accordion-item_header>.inner-head>.ins-accordion-item_header_caret-wrap>.close-icon{
  padding: 0px 0px 0px 8px;
}

.blocks-header-drawer-05 .ins-accordion-item_content{
  border: none;
}
.blocks-header-drawer-05 .ins-accordion.menu .ins-accordion-item_content .inner-content,
.blocks-header-drawer-05 .ins-accordion-item_content .ins-accordion-link{
  border: none;
}
.blocks-header-drawer-05 .ins-accordion-item_content .ins-accordion-link_link{
  padding: 0px 0px 32px 23px;
}
/* End: INS Components Overwrite - Accordion */


/* Start: INS Components Overwrite - Drawer */
ins-drawer.blocks-header-drawer-05 .ins-drawer-wrap .ins-content.left{
  left: -100%;
}

ins-drawer.blocks-header-drawer-05 .ins-drawer-wrap.opened .ins-content.left{
  z-index: 99999;
  width:100% !important;
  left: 0%;
}
ins-drawer.blocks-header-drawer-05 .ins-drawer-header.sticky+.ins-drawer-body{
  margin-top: 0px;
  padding:0px;
}
ins-drawer.blocks-header-drawer-05 .ins-drawer-header.sticky{
  display:none;
}
/* End: INS Components Overwrite - Drawer */


.navigation-05 ins-drawer#mobile-menu .ins-drawer-wrap .ins-content, 
.navigation-05 ins-drawer#mobile-menu .ins-backdrop-wrap{
  top: 103px;
}

.navigation-05 ins-drawer#mobile-menu .menu li a,
.navigation-05 ins-drawer#mobile-menu .other-info{
  padding: 24px 24px 24px 24px;
}

.navigation-05 ins-drawer#mobile-menu .menu li .ins-accordion-item .ins-accordion-link a{
  padding: 24px 24px 24px 40px;
}

.navigation-05 ins-drawer#mobile-menu .menu li .contact-info a,
.navigation-05 ins-drawer#mobile-menu .menu li .contact-info p,
.navigation-05 ins-drawer#mobile-menu .menu li .address-info a,
.navigation-05 ins-drawer#mobile-menu .menu li .address-info p{
  font-size: var(--typography-small, 0.875rem);
}
 
document.getElementById('desktop-drawer-menu-btn').addEventListener('click', function () {
    console.log("wheatonize");
    document.getElementById('header-block-05-drawer').setDrawerState(true);
  });
  // button event to open drawer
  document.getElementById('close-block-drawer-05').addEventListener('insClick', function () {
    document.getElementById('header-block-05-drawer').setDrawerState(false);
  });