Global Site Header

Usage

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 ….

Off-canvas Markup

<!-- 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>

Global Site Header

<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>