Navigation 3

Breakpoint is limited based on your device or window size.

<header class="navigation-03 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-3 medium-3 small-0"></div>
      <div class="show-for-large large-7 medium-6 small-12 cell text-right">
        <div class="header-top-links">
          <a class="color-main">
            <i class="icon-phone1"></i>
            <span class="phone-email">+1 520 467 4837</span>
          </a>
          <a class="color-main">
            <i class="icon-mail1"></i>
            <span class="phone-email">template@insites.io</span>
          </a>
          <a class="color-main login-cart">
            <i class="icon-user-1"></i>
            <span>Sign in</span>
          </a>
  
          <a class="color-main login-cart">
            <span class="cart-count">0</span>
            <i class="icon-shopping-cart weight-700"></i>
          </a>
        </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>
  <!-- navigation items -->
  <div class="nav-bar">
    <div class="wrapper">
      <div class="bottom-bar show-for-large">
        <ul class="menu align-center">
          <!-- list sub data -->
          <li>
            <ins-dropdown lined label="Mens" link="#">
              <ul class="text-left">
                <!-- list sub item -->
                <li>
                  <a data-test="sub-menu-subitem">Shoes</a>
                </li>
                <!-- /list sub item -->
                <!-- list sub item -->
                <li class="has-submenu">
                  <a>Clothes
                    <i class="icon-angle-right"></i>
                  </a>

                  <!-- child submenu -->
                  <div class="child-submenu">
                    <ul class="text-left ins-dropdown_menu-card">
                      <li>
                        <a>T Shirts</a>
                      </li>
                      <li>
                        <a>Sweaters</a>
                      </li>
                      <li>
                        <a>Pants</a>
                      </li>
                    </ul>
                  </div>
                  <!-- /child submenu -->
                </li>
                <!-- /list sub item -->
                <!-- list sub item -->
                <li>
                  <a data-test="sub-menu-subitem">Accesories</a>
                </li>
                <!-- /list sub item -->
              </ul>
            </ins-dropdown>
          </li>
          <!-- /list sub data -->

          <!-- list sub data -->
          <li>
            <ins-dropdown lined label="Womens" link="#">
              <ul class="text-left">
                <!-- list sub item -->
                <li>
                  <a data-test="sub-menu-subitem">Shoes</a>
                </li>
                <!-- /list sub item -->
                <!-- list sub item -->
                <li class="has-submenu">
                  <a>Clothes
                    <i class="icon-angle-right"></i>
                  </a>

                  <!-- child submenu -->
                  <div class="child-submenu">
                    <ul class="text-left ins-dropdown_menu-card">
                      <li>
                        <a>T Shirts</a>
                      </li>
                      <li>
                        <a>Sweaters</a>
                      </li>
                      <li>
                        <a>Pants</a>
                      </li>
                    </ul>
                  </div>
                  <!-- /child submenu -->
                </li>
                <!-- /list sub item -->
                <!-- list sub item -->
                <li>
                  <a data-test="sub-menu-subitem">Accesories</a>
                </li>
                <!-- /list sub item -->
              </ul>
            </ins-dropdown>
          </li>
          <!-- /list sub data -->

          <!-- normal list -->
          <li>
            <a>
              Sale
            </a>
          </li>
          <!-- /normal list -->

          <!-- normal list -->
          <li>
            <a>
              Gifts
            </a>
          </li>
          <!-- /normal list -->

          <!-- normal list -->
          <li>
            <a>
              About
            </a>
          </li>
          <!-- /normal list -->

          <!-- normal list -->
          <li>
            <a>
              Blog
            </a>
          </li>
          <!-- /normal list -->

        </ul>
      </div>
    </div>
  </div>
  <!-- /navigation items -->
</header>

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

<div class="navigation-03 drawer-holder">
  <ins-drawer no-padding id="mobile-menu" show-header=false position="right">
    <div>
      <ul class="vertical menu">
        <li>
          <ins-accordion menu>
            <ins-accordion-item heading="Mens" link="#" open-icon="icon-plus" close-icon="icon-minus"
              class="has-subitems">
              <ins-accordion-link label="Shoes" link="#">
              </ins-accordion-link>

              <ins-accordion-link label="Accesories" link="#">
                <!-- sub -->
                <ins-accordion menu>
                  <ins-accordion-item heading="Clothes" link="#" open-icon="icon-plus" close-icon="icon-minus"
                    class="has-nested-subitems">
                    <ins-accordion-link label="T Shirt" link="#">
                    </ins-accordion-link>

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

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

                  </ins-accordion-item>
                </ins-accordion>
                <!-- /sub -->
              </ins-accordion-link>              

            </ins-accordion-item>
            <ins-accordion-item heading="Womens" link="#" open-icon="icon-plus" close-icon="icon-minus"
              class="has-subitems">
              <ins-accordion-link label="Shoes" link="#">
              </ins-accordion-link>

              <ins-accordion-link label="Accesories" link="#">
                <!-- sub -->
                <ins-accordion menu>
                  <ins-accordion-item heading="Clothes" link="#" open-icon="icon-plus" close-icon="icon-minus"
                    class="has-nested-subitems">
                    <ins-accordion-link label="T Shirt" link="#">
                    </ins-accordion-link>

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

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

                  </ins-accordion-item>
                </ins-accordion>
                <!-- /sub -->
              </ins-accordion-link>              

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

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

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

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

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

        <li>
          <ins-accordion menu>
            <ins-accordion-item heading="Luke Sebastian" link="#" open-icon="icon-plus" close-icon="icon-minus"
              class="has-subitems">
              <ins-accordion-link label="Account Information" link="#">
              </ins-accordion-link>

              <ins-accordion-link label="Order History" link="#">
              </ins-accordion-link>

              <ins-accordion-link label="Sign Out" link="#">
              </ins-accordion-link>

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

        <!-- phone -->
        <li class="small no-submenu">
          <a class="color-font-link phone-email" href="tel:617240387322" data-test="phone-link-mobile">
            <i class="icon-phone1"></i>
            +1 520 467 4837
          </a>
        </li>
        <!-- /phone -->
        <!-- email -->
        <li class="small no-submenu">
          <a class="color-font-link phone-email" href="mailto:email@template.com" data-test="email-link-mobile">
            <i class="icon-mail1"></i>
            <span>template@insites.io</span>
          </a>
        </li>
        <!-- /email -->

      </ul>
    </div>
  </ins-drawer>
</div>
 
/* navigation-03 */
.navigation-03 {
  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-03.drawer-holder {
  z-index: 99999; 
}

.navigation-03 ins-dropdown .ins-dropdown_menu {
  /* display: block; */
}

.navigation-03 .has-submenu > .child-submenu {
  display: none;
  /* display: block; */
}

.navigation-03 .has-submenu:hover > .child-submenu {
  display: block;
}

.navigation-03 .has-submenu > a > i {
  float: right;
  padding-top: 2px;
}

.navigation-03 .child-submenu {
  position: absolute;
  right: -245px;
  top: 0;
  background-color: transparent;
  padding-left: 16px;
  min-width: 245px;
  max-width: 300px;
}

.navigation-03 ins-dropdown .ins-dropdown_menu {
  padding-top: 16px!important;
  padding-right: 16px!important;
  min-width: 245px;
}

.navigation-03 .ins-dropdown_menu-card li {
  border-bottom: 1px solid var(--color-ui-04, #E4E6EC);
}

.navigation-03 .menu a,
.navigation-03 .ins-dropdown_menu-card li a,
.navigation-03 ins-drawer#mobile-menu .menu li a {
  padding: 24px;
  font-family: var(--font-family-03, 'Cabin', sans-serif);
  font-weight: 400;
  font-style: normal;
  line-height: 24px;
}

.navigation-03 ins-drawer#mobile-menu .menu li a.phone-email {
  font-family: var(--font-family-03, 'Cabin', sans-serif);
  font-size: var(--typography-medium, 1rem);
}

.navigation-03 .menu a,
.navigation-03 .header-top-bar a {
  font-weight: 700;
}

.navigation-03 .nav-bar .menu a,
.navigation-03 .login-cart {
  color: var(--color-font-body, #595959);
}



.navigation-03 .menu a:hover ~ i,
.navigation-03 .menu a:hover {
  color: var(--color-main, #116EC3);
}

.navigation-03 .ins-accordion-item.open>.ins-accordion-item_header>.inner-head {
  background-color: var(--color-ui-01, #FFFFFF);
  color: var(--color-main, #116EC3);
}

.navigation-03 .ins-accordion-item.open>.ins-accordion-item_header>.inner-head:hover {
  /* main heading */
  background-color: var(--color-ui-01, #FFFFFF)!important;
}

.navigation-03 .ins-accordion-item.closed>.ins-accordion-item_header>.inner-head:hover {
  /* main heading */
  background-color: var(--color-ui-01, #FFFFFF)!important;
}

.navigation-03 .ins-accordion.menu .ins-accordion-item .inner-head:hover {
  background-color: none;
}

.navigation-03 ins-drawer#mobile-menu .ins-accordion-item.open>.ins-accordion-item_header>.inner-head .heading {
  color: var(--color-main, #116EC3);
}

.navigation-03 ins-drawer#mobile-menu .ins-accordion.menu ins-accordion-item .ins-accordion-item_header {
  /* border-top: none; */
  border-bottom: 1px solid var(--color-ui-04, #E4E6EC);
}

.navigation-03 ins-drawer#mobile-menu .menu li {
  border-bottom: none;
  /* border-bottom: 1px solid #EBEBEB; */
}

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

.navigation-03 .ins-accordion-item_content .inner-content {
  border: none;
}

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

.navigation-03 .ins-accordion-item_header>.inner-head { 
  padding: 0;
}

.navigation-03 .ins-accordion-item_header:hover {
  /* background-color: #000; */
}

.navigation-03 .has-subitems > .ins-accordion-item > .ins-accordion-item_content a {
  margin-left: 16px;
}

.navigation-03 .has-nested-subitems > .ins-accordion-item > .ins-accordion-item_content a {
  margin-left: 40px;
}

.navigation-03 .has-subitems a,
.navigation-03 .has-nested-subitems a {
  display: inline-block;
}

.navigation-03 ins-drawer#mobile-menu .has-subitems a.heading,
.navigation-03 ins-drawer#mobile-menu .menu li.no-submenu > a {
  font-weight: 700;
}

.navigation-03 ins-drawer#mobile-menu .has-subitems a.heading {
  font-weight: 400;
}

.navigation-03 ins-drawer#mobile-menu .has-nested-subitems a.heading {
  font-weight: 400!important;
}

.navigation-03 ins-drawer#mobile-menu .has-subitems > .ins-accordion-item a.heading {
  font-weight: 700;
}

.navigation-03 .phone-email {
  font-family: var(--font-family-01, sans-serif);
  font-size: var(--typography-x-small, 0.75rem);
}

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

.navigation-03 ins-drawer#mobile-menu .ins-drawer-wrap .ins-content {
  top: 83px;
}

.navigation-03 .header-top-bar .logo, .header .logo {
  height: 42px;
}

.navigation-03 .cart-count {
  padding: 3px 6px!important;
}

.navigation-03 .header-top-bar {
  height: unset
}

.navigation-03 .nav-bar .menu .ins-dropdown_label a,
.navigation-03 .nav-bar .menu > li > a {
  padding: 16px 24px;
}

.navigation-03 .header-top-links a:not(.login-cart) {
  padding: 8px 24px;
  margin-right: 8px;
}

.navigation-03 .header-top-links .icon-phone1,
.navigation-03 .header-top-links .icon-mail1,
.navigation-03 .header-top-links .icon-user-1 {
  margin-right: 8px;
}

@media screen and (max-width: 1023px) {
  .navigation-03.header {
    border-bottom: 1px solid var(--color-ui-03, #F2F4F8);
  }
}
/* end navigation-03 */