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