<header class="navigation-01 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="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-4 medium-3 small-0"></div> <div class="show-for-large large-6 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> </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"> <!-- 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-01 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 01 */ .navigation-01 .navigation-multi-01 .header-top-bar .logo, .header .logo { height: 42px; } .navigation-01.header { border-bottom: 1px solid var(--color-ui-03, #F2F4F8); } .navigation-01 { 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-01 ins-dropdown .ins-dropdown_menu { /* display: block; */ } .navigation-01 .has-submenu > .child-submenu { display: none; /* display: block; */ } .navigation-01 .has-submenu:hover > .child-submenu { display: block; } .navigation-01 .has-submenu > a > i { float: right; padding-top: 3px; } .navigation-01 .child-submenu { position: absolute; right: -245px; top: 0; background-color: transparent; padding-left: 16px; min-width: 245px; max-width: 300px; } .navigation-01 ins-dropdown .ins-dropdown_menu { padding-top: 16px!important; padding-right: 16px!important; min-width: 258px; } .navigation-01 .ins-dropdown_menu-card li { border-bottom: 1px solid var(--color-ui-04, #E4E6EC); } .navigation-01 .menu a, .navigation-01 .ins-dropdown_menu-card li a, .navigation-01 ins-drawer#mobile-menu .menu li a { font-family: var(--font-family-03, 'Cabin', sans-serif); font-weight: 400; font-style: normal; line-height: 24px; } .navigation-01 .nav-bar .menu a { padding: 16px 24px; } @media screen and (min-width: 1024px) { .navigation-01 .nav-bar { display: block; } } .navigation-01 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-01 .menu a, .navigation-01 .header-top-bar a { font-weight: 700; } .navigation-01 .nav-bar .menu a { color: var(--color-font-body, #595959); } .navigation-01 .menu a:hover ~ i, .navigation-01 .menu a:hover { color: var(--color-main, #116EC3); } .navigation-01 .ins-accordion-item.open>.ins-accordion-item_header>.inner-head { background-color: var(--color-ui-01, #FFFFFF); color: var(--color-main, #116EC3); } .navigation-01 .ins-accordion-item.open>.ins-accordion-item_header>.inner-head:hover { /* main heading */ background-color: var(--color-ui-01, #FFFFFF)!important; } .navigation-01 .ins-accordion-item.closed>.ins-accordion-item_header>.inner-head:hover { /* main heading */ background-color: var(--color-ui-01, #FFFFFF)!important; } .navigation-01 .ins-accordion.menu .ins-accordion-item .inner-head:hover { background-color: none; } .navigation-01 ins-drawer#mobile-menu .ins-accordion-item.open>.ins-accordion-item_header>.inner-head .heading { color: var(--color-main, #116EC3); } .navigation-01 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-01 ins-drawer#mobile-menu .menu li { border-bottom: none; /* border-bottom: 1px solid #EBEBEB; */ } .navigation-01 ins-drawer#mobile-menu .menu li.no-submenu { border-bottom: 1px solid var(--color-ui-04, #E4E6EC); } .navigation-01 .ins-accordion-item_content .inner-content { border: none; } .navigation-01 ins-drawer#mobile-menu .ins-accordion-link { border-bottom: 1px solid var(--color-ui-04, #E4E6EC); } .navigation-01 .ins-accordion-item_header>.inner-head { padding: 0; } .navigation-01 .ins-accordion-item_header:hover { /* background-color: #000; */ } .navigation-01 .has-subitems > .ins-accordion-item > .ins-accordion-item_content a { margin-left: 16px; } .navigation-01 .has-nested-subitems > .ins-accordion-item > .ins-accordion-item_content a { margin-left: 40px; } .navigation-01 .has-subitems a, .navigation-01 .has-nested-subitems a { display: inline-block; } .navigation-01 ins-drawer#mobile-menu .has-subitems a.heading, .navigation-01 ins-drawer#mobile-menu .menu li.no-submenu > a { font-weight: 700; } .navigation-01 ins-drawer#mobile-menu .has-subitems a.heading { font-weight: 400; } .navigation-01 ins-drawer#mobile-menu .has-nested-subitems a.heading { font-weight: 400!important; } .navigation-01 ins-drawer#mobile-menu .has-subitems > .ins-accordion-item a.heading { font-weight: 700; } .navigation-01 .phone-email { font-family: var(--font-family-01, sans-serif); font-size: var(--typography-x-small, 0.75rem); } .navigation-01 ins-drawer#mobile-menu .ins-backdrop-wrap, .navigation-01 ins-drawer#mobile-menu .ins-drawer-wrap .ins-content { /* drawer fix */ max-height: unset; } .navigation-01 .header-top-bar .logo, .header .logo { height: 42px; } .navigation-01 .cart-count { padding: 3px 6px!important; } .navigation-01 .menu .ins-dropdown_label i.icon-angle-down { position: relative; right: 15px; } .navigation-01 .ins-dropdown_label > a { display: inline-block; } .navigation-01 .header-top-bar .icon-phone1, .navigation-01 .header-top-bar .icon-mail1 { margin-right: 8px!important; } .navigation-01 .header-top-bar a { padding: 8px 24px; margin-left: 16px; } .navigation-01 .header-top-bar { height: unset; } .navigation-01 ins-drawer#mobile-menu .ins-drawer-wrap .ins-content { /* for demo page */ top: 76px; } .navigation-01.drawer-holder { z-index: 99999; } .navigation-01 .logo-holder { padding: 0!important; margin-left: 0!important; } .navigation-01.header .nav-bar { border-bottom: none; } /* end navigation-01 */