In order for the global site header’s mobile menu to work properly, the entire site’s page markup (including the Global Site Header markup) must be wrapped in the Off-canvas Markup seen below. In the Off-canvas Markup, look for this line of text to understand where the header markup lives in relation to the off-canvas wrapper: … Site header, page content, and footer ….
<!-- Wraps the entire content of the page plus the off-canvas mobile menu and desktop search -->
<div class="off-canvas-wrapper">
<!-- Bradford Main Mobile Nav -->
<div class="off-canvas position-left" id="offCanvasMainMenu" data-off-canvas>
<!-- Close button -->
<div class="close-off-canvas">
<div class="title-bar-left">
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">
×
</span>
<span class="close-menu-text">Close Menu</span>
</button>
</div>
</div>
<ul class="vertical menu" data-drilldown>
<li>
<a href="#drill-1" class="text-medium">Checks</a>
<ul class="vertical menu">
<li><a href="#">Computer Checks</a></li>
<li><a href="#">Manual Business Checks</a></li>
<li class="text-medium"><a href="#">Shop All Checks</a></li>
</ul>
</li>
<li>
<a href="#drill-2" class="text-medium">Envelopes</a>
<ul class="vertical menu">
<li><a href="#">Double-Window Envelopes</a></li>
<li><a href="#">Tax Form Envelopes</a></li>
<li class="text-medium"><a href="#">Shop All Envelopes</a></li>
</ul>
</li>
<li>
<a href="#drill-3" class="text-medium">Deposit Solutions</a>
<ul class="vertical menu">
<li><a href="#">Manual Deposit Tickets</a></li>
<li class="text-medium"><a href="#">Shop All Deposit Solutions</a></li>
</ul>
</li>
<li>
<a href="#drill-4" class="text-medium">Accessories</a>
<ul class="vertical menu">
<li><a href="#">Stamps</a></li>
<li><a href="#">Binders</a></li>
<li class="text-medium"><a href="#">Shop All Accessories</a></li>
</ul>
</li>
<li>
<a href="#drill-5" class="text-medium">Tax Forms</a>
<ul class="vertical menu">
<li><a href="#">W-2s and W-3s</a></li>
<li><a href="#">1099s and 1096s</a></li>
<li><a href="#">Other Tax Forms</a></li>
<li><a href="#">Tax Form Envelopes</a></li>
<li class="text-medium"><a href="#">Shop All Tax Forms</a></li>
</ul>
</li>
<hr>
<li>
<a href="#">
<i class="fa fa-search" aria-hidden="true"></i> <span>Search</span>
</a>
<ul class="vertical menu">
<li>
<div id="atg_store_search" class="site-search mobile-search">
<form action="#" id="searchForm" requiressessionconfirmation="false">
<input class="text atg_store_searchInput site-search-field" value="" placeholder="Search…" type="text" autocomplete="off">
<div id="searchBar"></div>
<div class="dimSearchSuggContainer"></div>
<div id="atg_store_searchStoreSelect">
</div>
<input class="site-search-submit" type="submit" name="search" id="atg_store_searchSubmit" value="">
</form>
</div>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-question-circle-o" aria-hidden="true"></i> <span>Help</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-truck" aria-hidden="true"></i> <span>Order Status</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user-circle-o" aria-hidden="true"></i> <span>Login / Register</span>
</a>
</li>
</ul>
</div>
<!-- /Bradford Main Mobile Nav -->
<!-- Bradford Desktop Search -->
<div class="off-canvas position-top search-desktop" id="offCanvasSearch" data-off-canvas>
<button class="close-button" aria-label="Close search" type="button" data-close>
<span aria-hidden="true">
×
</span>
</button>
<div class="search-off-canvas">
<div class="search-container">
<form action="" class="custom-search-box" name="searchform">
<div role="search" class="custom-search-box_wrapper">
<input class="custom-search-box_input" type="search" name="search" placeholder="What are you searching for?" autocomplete="off" required="required">
<button type="submit" title="Submit your search query." class="custom-search-box_submit small hollow button">
Go
</button>
</div>
</form>
</div>
</div>
</div>
<!-- /Bradford Desktop Search -->
<!-- Wraps the entire content of the page including site header and footer -->
<div class="off-canvas-content" data-off-canvas-content>
… Site header, page content, and footer …
</div>
</div>
<section class="site-header">
<nav class="site-header-main">
<div class="container-full">
<button class="menu-icon hide-for-xlarge" type="button" data-open="offCanvasMainMenu"></button>
<a href="#" class="site-logo">
</a>
<span class="tagline-text">
Quality and Artistry in a <br>Name You Can Trust
</span>
<ul class="menu nav-service-links show-for-xlarge">
<li>
<a href="#" data-open="offCanvasSearch">
<i class="fa fa-search" aria-hidden="true"></i> <span>Search</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-question-circle-o" aria-hidden="true"></i> <span>Help</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-truck" aria-hidden="true"></i> <span>Order Status</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user-circle-o" aria-hidden="true"></i> <span>Login / Register</span>
</a>
</li>
</ul>
<div class="cart">
<a class="cart-link" href="#" alt="cart">
<i class="fa fa-shopping-cart" aria-hidden="true" name="cart" alt="icon for cart"></i>
<span class="cart-count">3</span>
</a>
</div>
</div>
</nav>
<nav class="top-bar show-for-xlarge">
<div class="container-responsive">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="has-submenu">
<a href="#">Checks</a>
<ul class="menu submenu vertical" data-submenu>
<li><a href="#">Computer Checks</a></li>
<li><a href="#">Manual Business Checks</a></li>
<li class="text-medium"><a href="#">Shop All Checks</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Envelopes</a>
<ul class="menu submenu vertical" data-submenu>
<li><a href="#">Double-Window Envelopes</a></li>
<li><a href="#">Tax Form Envelopes</a></li>
<li class="text-medium"><a href="#">Shop All Envelopes</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Deposit Solutions</a>
<ul class="menu submenu vertical" data-submenu>
<li><a href="#">Manual Deposit Tickets</a></li>
<li class="text-medium"><a href="#">Shop All Deposit Solutions</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Accessories</a>
<ul class="menu submenu vertical" data-submenu>
<li><a href="#">Stamps</a></li>
<li><a href="#">Binders</a></li>
<li class="text-medium"><a href="#">Shop All Accessories</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Tax Forms</a>
<ul class="menu submenu vertical" data-submenu>
<li><a href="#">W-2s and W-3s</a></li>
<li><a href="#">1099s and 1096s</a></li>
<li><a href="#">Other Tax Forms</a></li>
<li><a href="#">Tax Form Envelopes</a></li>
<li class="text-medium"><a href="#">Shop All Tax Forms</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</section>