Navigation

Barebones includes simple navigation styles and a small mobile menu toggle.

WordPress menu registration and rendering are covered in the WordPress section. This page focuses on the frontend classes and behaviour used by the theme navigation.

Base navigation

Use .nav for simple list-based navigation. The base .nav class removes list styling and resets the list margin. Top-level menu items are displayed inline.

HTML
<ul class="nav">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/about/">About</a>
    </li>
</ul>

The header menu uses .nav.nav--header. On smaller screens, the header navigation is hidden until the mobile menu is opened.

PHP
<?php wp_nav_menu([
    'theme_location' => 'header',
    'menu_class'     => 'nav nav--header'
]); ?>

The footer menu uses .nav.nav--footer. Barebones does not add much footer-specific navigation styling by default.

PHP
<?php wp_nav_menu([
    'theme_location' => 'footer',
    'menu_class'     => 'nav nav--footer'
]); ?>

Mobile toggle

The mobile toggle uses .nav-burger and .js-menu-toggle. The .js-menu-toggle class is the JavaScript hook.

HTML
<a href="#" class="nav-burger js-menu-toggle">
    <span class="nav-burger__line"></span>
    <span class="nav-burger__line"></span>
    <span class="nav-burger__line"></span>
</a>

The .nav-burger and .nav-burger__line classes handle the visual styling. When the toggle is clicked, JavaScript adds .open to .js-menu-toggle. The burger lines animate into a close icon when this class is present.

JavaScript also toggles .menu-open on the body. This prevents the page from scrolling while the mobile menu is open.

HTML
<a href="#" class="nav-burger js-menu-toggle open">
    ...
</a>
HTML
<body class="menu-open">

Below the nav breakpoint, the burger is displayed and .header__navigation is hidden by default. This breakpoint can be defined by editing $breakpoint-nav.

SCSS
$breakpoint-nav: 1000px;

Customising navigation

Navigation component styles live in assets/styles/components/_nav.scss.

Header layout styles live in assets/styles/layout/_header.scss.

Footer layout styles live in assets/styles/layout/_footer.scss.

Use .nav for shared menu styling, and add modifier classes such as .nav--header or .nav--footer for context-specific changes.