Header

Barebones includes a simple site header with a logo, header menu, and mobile navigation toggle.

The header is intentionally minimal. It provides a useful starting structure without assuming a final project design.

Template

The header markup lives in header.php. It includes the document opening markup, wp_head(), wp_body_open(), and the site header. Keep these WordPress hooks in place when customising the header.

HTML
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
        <?php wp_body_open(); ?>

Header layout

The header uses the Barebones grid. The logo and navigation are split into columns. On larger screens, the logo uses three columns and the navigation uses the remaining space with an offset.

HTML
<header class="header" role="banner">
    <div class="container">
        <div class="row row--flex items-center">
            ...
        </div>
    </div>
</header>

The logo link uses .header__logo. The default logo file is img/logo.svg. The image alt text uses the site name from WordPress.

HTML
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="header__logo">
    <img src="<?php echo esc_url( get_stylesheet_directory_uri() . '/img/logo.svg' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" 
width="200" />
</a>

The header menu is rendered inside .header__navigation. The menu uses the header menu location and the nav nav--header classes.

PHP
<div class="header__navigation">
    <nav role="navigation">
        <?php wp_nav_menu([
            'theme_location' => 'header',
            'menu_class'     => 'nav nav--header'
        ]); ?>
    </nav>
</div>

Mobile toggle

The mobile menu toggle sits beside the header navigation. The js-menu-toggle class is used by JavaScript. The nav-burger classes handle the visual styling.

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>

Mobile header behaviour

Below $breakpoint-nav, .header__navigation is hidden by default.

When the mobile toggle is clicked, JavaScript toggles the navigation visibility and adds state classes.

  • .open is added to the toggle
  • .menu-open is added to body
  • .header__navigation fades in or out

This behaviour lives in assets/scripts/scripts.js.

Styles

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

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

The default header styles add vertical padding, bottom spacing, mobile navigation positioning, and logo stacking context.

Customising the header

Most projects will customise the header early.

Common changes include:

  • replacing img/logo.svg
  • changing the header grid columns
  • adding utility navigation
  • adding active menu styles
  • changing the mobile breakpoint
  • replacing the mobile menu animation
  • adding dropdown or submenu behaviour

Keep structural WordPress hooks such as wp_head() and wp_body_open() intact while making these changes.