<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="/assets/images/logo/web-blocks-logo.png" 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 */