CPS header

Code

<script src="jquery-2.2.4.min.js"></script>
<!-- Include individual JavaScript components from Bootstrap 4.1.1 -->
<script src="bootstrap/4.1.1/util.js"></script>
<script src="bootstrap/4.1.1/modal.js"></script>
<!-- Or include the full Bootstrap JavaScript but do not include both -->
<script src="bootstrap/4.1.1/bootstrap.js"></script>
<script src="coc.nav.js"></script>
<script>
    $( '#navId' ).ready(function() {
        COC.Nav.Init();
    });
</script>

<header class="cui coc-header cps-header">
    <div class="header-inner">
        <!-- Skip links provide screen readers and keyboard users a shortcut to the main content area -->
        <ul class="skip-links">
            <li><a href="#content" class="skip-link">Skip to main content</a></li>
            <li><a href="#search-field" class="skip-link">Skip to search</a></li>
        </ul>

        <!-- Logo -->
        <a href="#" class="coc-logo">
            <img src="../img/CPS-logo.svg" alt="Return to the Calgary Police Service homepage" class="no-print" />
        </a>

        <!-- Mobile-UX-optimized Search Part 1. Real search box, hidden for xxs screens -->
        <div class="cui search-box hidden-xxs">
            <label for="search-field" class="sr-only">Search</label>
            <input id="search-field" class="form-control search-box-input" type="search">
            <button class="cui search-box-btn btn-md icon-only primary">
                <span class="cicon-search"></span>
                <span class="sr-only">Submit search</span>
            </button>
        </div>

        <!-- Mobile-UX-optimized Search Part 2. Faux search box, clicking this will open up the modal, only visible for xxs screens -->
        <button class="cui search-box visible-xxs" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">
            <span class="form-control search-box-input"></span>
            <span class="cui search-box-btn btn-md icon-only primary">
                <span class="cicon-search"></span>
                <span class="sr-only">Submit search</span>
            </span>
        </button>

        <!-- Mobile-UX-optimized Search Part 3. Modal, embedded in the document, activated by the mobile faux search box -->
        <div id="modal-search" class="cui modal" tabindex="-1" role="dialog" aria-labelledby="modal-search-title" aria-hidden="true">
            <div class="modal-dialog modal-fs-mobile" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 id="modal-search-title" class="modal-title">Search</h2>
                        <button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">Close</button>
                    </div>
                    <div class="modal-body">
                        <div class="cui search-box">
                            <label for="search-field-modal" class="sr-only">Search</label>
                            <input id="search-field-modal" class="form-control search-box-input" type="search">
                            <button class="cui search-box-btn btn-md icon-only primary">
                                <span class="cicon-search"></span>
                                <span class="sr-only">Submit search</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mega navigation menu button -->
        <button id="exploreBtn" type="button" class="nav-btn-mobile" aria-controls="navId" aria-haspopup="true" aria-label="Open menu">
            <span class="sr-only">Explore</span>
            <span class="cicon-bars"></span>
        </button>
    </div>

    <!-- Mega navigation menu -->
    <nav id="navId" class="cui globalNav">
        <button id="closeBtn" type="button" class="nav-btn-mobile" aria-controls="navId" aria-haspopup="true" aria-label="Close menu">
            Close<span class="cicon-times"></span>
        </button>
        <ul class="nav-menu">
            ... Truncated for brevity
        </ul>
    </nav>
</header>