Navigation 4

Breakpoint is limited based on your device or window size.

<header class="navigation-04 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>
          <img class="logo" src="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/d455282f-721d-4f31-b798-1e6eafa84a31/insites-template-logo.png?updated=1723195348" alt="logo" />
        </a>
      </div>
      <div class="large-1 medium-3 small-0"></div>
      <div class="show-for-large large-9 medium-6 small-12 cell text-right">
        <div class="header-links">
          <a class="color-main" class="color-font-head">
            Shipping and Delivery
          </a>
          <a class="color-main" class="color-font-head">
            Orders
          </a>
          <a class="color-main" class="color-font-head">
            Returns
          </a>
          <a class="color-main" class="color-font-head">
            Membership
          </a>      
        </div>  
        <ins-button class="hide-for-small-only" solid label="Go To Website">
        </ins-button>
      </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>

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

<div class="navigation-04 drawer-holder">
  <ins-drawer no-padding id="mobile-menu" show-header=false position="right">
    <div>
      <ul class="vertical menu">
        <!-- normal list -->
        <li>
          <a>
           Shipping and Delivery
          </a>
        </li>
        <!-- /normal list -->
        <!-- normal list -->
        <li>
          <a>
           Orders
          </a>
        </li>
        <!-- /normal list -->
        <!-- normal list -->
        <li>
          <a>
           Returns
          </a>
        </li>
        <!-- /normal list -->
        <!-- normal list -->
        <li>
          <a>
           Membership
          </a>
        </li>
        <!-- /normal list -->
        <!-- normal list -->
        <li>
          <a>
           Go to Website
          </a>
        </li>
        <!-- /normal list -->
      </ul>
    </div>
  </ins-drawer>
</div>
 
.navigation-04 {
  display: block; 
  position: fixed; 
  z-index: 999999; 
  background-color: var(--color-ui-01, #FFFFFF);
  width: 100%;
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); 
  transform-style: preserve-3d;
}

.navigation-04 ins-drawer#mobile-menu .ins-backdrop-wrap,
.navigation-04 ins-drawer#mobile-menu .ins-drawer-wrap .ins-content {
  /* drawer fix */
  max-height: unset;
}

.navigation-04 .navigation-multi-01 .header-top-bar .logo, .header .logo {
  height: 42px;
}

.navigation-04 .header-links {
  display: inline-block;
  margin-top: 7px;
}

.navigation-04 .header-links a {
  font-family: var(--font-family-01, 'Lato', sans-serif);
  font-size: var(--typography-x-small, 0.75rem);
  font-weight: 700;
  color: var(--color-font-body, #595959);
  padding: 8px 24px;
  margin-left: 8px;
}

.navigation-04 ins-drawer#mobile-menu .menu li a {
  padding: 24px;
}

.navigation-04 ins-drawer#mobile-menu .menu li {
  border-bottom: 1px solid var(--color-ui-04, #E4E6EC);
}

.navigation-04 .header-top-bar {
  height: unset;
  padding-top: 32px;
  padding-bottom: 32px;
}

@media screen and (max-width: 1024px) {
  /* adjustment for demo page */
  .navigation-04 ins-drawer#mobile-menu .ins-backdrop-wrap, ins-drawer#mobile-menu .ins-drawer-wrap .ins-content {
    top: 107px;
  }
}

.navigation-04.header {
  border-bottom: 1px solid var(--color-ui-03, #F2F4F8);;
}

.navigation-04 .header-top-bar ins-button.hide-for-small-only {
  margin-left: 24px;
}

.navigation-04.drawer-holder {
  z-index: 99999;
}