Navigation 2

Breakpoint is limited based on your device or window size.

<header class="navigation-02 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-8 cell">
        <a class="logo-holder">
          <img class="logo" src="/assets/images/logo/web-blocks-logo.png" alt="logo" />
        </a>
      </div>
      <div class="large-2 medium-3 small-0"></div>
      <div class="show-for-large large-8 medium-6 small-12 cell text-right">
        <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>
        <ins-input placeholder="What are you looking for?" icon="icon-search">
        </ins-input>
      </div>
      <div class="hide-for-large mobile-menu-toggle large-0 medium-6 small-4 cell vertical-align-middle align-right">
        <div class="mobile-search">
          <a>
            <i class="icon-search"></i>
          </a>
        </div>
        <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">
          <!-- normal list -->
          <li>
            <a>
              Why Insites
            </a>
          </li>
          <!-- /normal list -->
          
          <!-- list sub data -->
          <li>
            <ins-dropdown lined label="Build with Insites" link="#">
              <ul class="text-left">
                <!-- list sub item -->
                <li>
                  <a data-test="sub-menu-subitem">Store Locator App</a>
                </li>
                <!-- /list sub item -->
                <!-- list sub item -->
                <li class="has-submenu">
                  <a>Database Driven Website
                    <i class="icon-angle-right"></i>
                  </a>

                  <!-- child submenu -->
                  <div class="child-submenu">
                    <ul class="text-left ins-dropdown_menu-card">
                      <li>
                        <a>Benefits</a>
                      </li>
                      <li>
                        <a>Industries</a>
                      </li>
                      <li>
                        <a>Features</a>
                      </li>
                    </ul>
                  </div>
                  <!-- /child submenu -->
                </li>
                <!-- /list sub item -->
                <!-- list sub item -->
                <li>
                  <a data-test="sub-menu-subitem">Company Team Page</a>
                </li>
                <!-- /list sub item -->
                <!-- list sub item -->
                <li>
                  <a data-test="sub-menu-subitem">Single Customer View</a>
                </li>
                <!-- /list sub item -->
              </ul>
            </ins-dropdown>
          </li>
          <!-- /list sub data -->

          <!-- normal list -->
          <li>
            <a>
              Partner with Insites
            </a>
          </li>
          <!-- /normal list -->        

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

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

<div class="navigation-02 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">
            Why Insites
          </a>
        </li>
        <!-- /normal list -->  

        <li>
          <ins-accordion menu>
            <ins-accordion-item heading="Build with Insites" link="#" open-icon="icon-plus" close-icon="icon-minus"
              class="has-subitems">
              <ins-accordion-link label="Store Locator App" link="#">
              </ins-accordion-link>

              <ins-accordion-link label="Company Team Page" link="#">
                <!-- sub -->
                <ins-accordion menu>
                  <ins-accordion-item heading="Database Drive Website" link="#" open-icon="icon-plus" close-icon="icon-minus"
                    class="has-nested-subitems">
                    <ins-accordion-link label="Benefits" link="#">
                    </ins-accordion-link>

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

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

                  </ins-accordion-item>
                </ins-accordion>
                <!-- /sub -->
              </ins-accordion-link>      
              
              <ins-accordion-link label="Single Customer View" link="#">
              </ins-accordion-link>

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

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

        <!-- 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 02 */
.navigation-02 .navigation-multi-01 .header-top-bar .logo, .header .logo {
  height: 42px;
}

.navigation-02 {
  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;
}

@media screen and (min-width: 1024px) {
  .navigation-02 .nav-bar {
    display: block;
  }
}

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

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

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

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

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

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

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

.navigation-02 .menu a,
.navigation-02 .ins-dropdown_menu-card li a,
.navigation-02 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-02 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-02 .menu a,
.navigation-02 .header-top-bar a {
  font-weight: 700;
}

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



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

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

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

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

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

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

.navigation-02 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-02 ins-drawer#mobile-menu .menu li {
  border-bottom: none;
  /* border-bottom: 1px solid #EBEBEB; */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.navigation-02.header .ins-input-wrap {
  display: inline-block;
  width: 37%;
}

.navigation-02 .mobile-search {
  position: absolute;
  right: 37px;
}

.navigation-02 .mobile-search i {
  color: var(--color-main, #116EC3);
}

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

.navigation-02 .header-top-bar .ins-input-wrap {
  margin-bottom: 0;
}

.navigation-02 .header-top-bar .icon-phone1, 
.navigation-02 .header-top-bar .icon-mail1 {
  margin-right: 8px!important;
}

.navigation-02 .header-top-bar a {
  padding: 8px 24px;
  margin-left: 16px;
}

.navigation-02 .header-top-bar a:last-of-type {
  margin-right: 24px;
}

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

.navigation-02 ins-drawer#mobile-menu .ins-drawer-wrap .ins-content {
  /* for demo page */
  top: 107px;
}

.navigation-02 .mobile-search > a,
.navigation-02 .logo-holder {
  padding: 0!important;
  margin: 0!important;
}

.navigation-02.drawer-holder {
  z-index: 99999;
}
/* end navigation-02 */