Primary Navmenu

The primary navigation menu appears at the top of every page and is used for global site navigation. Currently, no primary vertical navmenu is available, although one may be added in the future.

The primary navigation menu is configured to for mobile. Without any JS, the navmenu requires the user to tap the hamburger icon once to open it, and a second time to close it. Dropdowns in the mobile navmenu currently do not expand. This is another feature that may be added in the future.

Two options are available for dropdowns. If you have the primary dropdown element be an anchor link, then the dropdown elements will not be available on a mobile device. If you use the input + label method, then the dropdown content will be available on a mobile device.

To add in mobile responsiveness to the navmenu, the checkbox and label as seen in the examples are required.

Primary Navmenu Example

<input type="checkbox" id="primary-navmenu-toggle">
<label class="primary-navmenu-toggle" for="primary-navmenu-toggle"></label>
<nav class="primary-navmenu dark-orange">
    <ul class="primary-navmenu-list">
        <li class="horizontal-navmenu-item primary-navmenu-item">
            <a href="/index.html" class="horizontal-navmenu-link primary-navmenu-link brighter-orange-hover darkest-black-text">Index</a>
        </li>
    </ul>
</nav>

Primary Navmenu With Dropdown Example

<input type="checkbox" id="primary-navmenu-toggle">
<label class="primary-navmenu-toggle" for="primary-navmenu-toggle"></label>
<nav class="primary-navmenu dark-orange">
    <ul class="primary-navmenu-list">
        <li class="horizontal-navmenu-item primary-navmenu-item">
            <a href="/index.html" class="horizontal-navmenu-link brighter-orange-hover darkest-black-text">Index</a>
        </li>
        <li class="horizontal-navmenu-item primary-navmenu-item horizontal-navmenu-dropdown">
            <a href="/stuff" class="horizontal-navmenu-link dropdown-link brighter-orange-hover darkest-black-text">Stuff</a>
            <ul class="dropdown-content dark-orange">
                <li class="horizontal-navmenu-item primary-navmenu-item">
                    <a href="Nonsense" class="horizontal-navmenu-link dropdown-item brighter-orange-hover darkest-black-text">Nonsense</a>
                </li>
            </ul>
        </li>
        <li class="horizontal-navmenu-item primary-navmenu-item primary-navmenu-dropdown">
            <input type="checkbox" id="dropdown1" class="primary-dropdown-toggle">
            <label for="dropdown1" class="primary-dropdown-label brighter-orange-hover darkest-black-text">Test</label>
            <ul class="dropdown-content dark-orange">
                <li class="horizontal-navmenu-item primary-navmenu-item">
                    <a href="/test1" class="horizontal-navmenu-link primary-navmenu-link dropdown-item brighter-orange-hover darkest-black-text">Test1</a>
                </li>
                <li class="horizontal-navmenu-item primary-navmenu-item">
                    <a href="/test2" class="dropdown-item horizontal-navmenu-link primary-navmenu-link brighter-orange-hover darkest-black-text">Test2</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>