Header and menus

How the site header is built, how to create a menu, and how the mobile menu behaves. Screenshot: the desktop header showing logo, primary menu, theme toggle and two CTA buttons

What is in the header

Logo

Your Site Identity logo, falling back to your site title as text. Width is clamped to keep the layout intact.

Primary menu

The menu assigned to the Primary Menu location. Supports nested dropdowns.

Theme toggle

The light/dark switch. Hideable in the Customizer.

Two CTA buttons

Primary and secondary, with editable labels and URLs.

Desktop order is controlled by the Navbar layout setting under Layout settings — left puts the logo first and the rest to the right; centered centres the logo with navigation arranged around it.

Create a menu

Appearance → Menus → Create New Menu. Give it a name, for example Primary Menu.

Add items

Use the Pages tab to tick your pages and Add to Menu, or the Custom Link tab for an external URL or anchor.

Assign it

Under Settings → Primary Menu, tick the menu you just created.

Save

The header updates immediately.

Screenshot: Appearance → Menus with the Primary Menu location checkbox ticked

There is one menu location in this theme, called Primary Menu. No second or footer location — the footer is configured separately in the Customizer. See Footer settings.

If no menu is assigned, the header shows a fallback list of your ten most recent top-level pages. This is deliberate — it means a fresh install is never left with an unclickable header. It is not a substitute for assigning a menu.

Nested dropdowns

Menu levels become nested submenus automatically. The theme supports several levels of nesting.

Multiple levels

Create parent and child items by dragging. Each level indents and can have its own dropdown.

Keyboard accessible

Submenus expose aria-expanded. Escape closes the open submenu and returns focus to the parent item.

Outside-click to close

Clicking anywhere outside the menu closes it.

Viewport-aware

A dropdown that would overflow the right edge flips to open leftwards, so it is never lost off-screen.

Screenshot: a nested dropdown menu open, showing two levels of submenu

Below the mobile breakpoint the desktop navigation collapses to a toggle button.

Behavior	Detail
Toggle	A hamburger button opens and closes the panel
Animation	The toggle animates between open and closed states
Submenus	Nested items still expand and collapse
Theme toggle	Remains available
CTAs	Remain available, stacked below the menu items

Mobile menu behaviour depends on JavaScript. With JavaScript disabled, the theme renders the navigation as a valid nested list — readable, but always expanded. That fallback is intentional and is better than a menu that cannot be opened at all.

Sticky or scroll behaviour

The header is not sticky by default. It scrolls away with the content, which keeps the design clean and avoids covering content on small screens. If you want a sticky header, add this to a child theme or Appearance → Customize → Additional CSS:

.vara-saas-site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--vara-surface);
}

Hiding the header on specific pages

The theme always renders the header. To hide it on particular pages, use a child theme:

// functions.php in your child theme
add_filter( 'body_class', function ( $classes ) {
    if ( is_page( 'landing' ) ) {
        $classes[] = 'hide-site-header';
    }
    return $classes;
} );

body.hide-site-header .vara-saas-site-header {
  display: none;
}

Header customization is limited by design

What you can change

Logo image and size, navbar alignment, menu contents and structure, menu icons, CTA labels and URLs, theme toggle visibility, and all colors.

What you cannot change without a child theme

Removing the header entirely, reordering regions, adding new header elements, changing the header markup, or making it sticky via the Customizer.

This is a deliberate trade-off. A fixed, predictable header is faster and more consistent than a page builder’s version, and it guarantees your navigation is present on every page. If you need full control, a child theme gives you complete freedom — see Child themes.

Elementor Theme Builder will not attach to this theme. The theme does not register Theme Builder locations, so Elementor header and footer templates will not apply. This is intentional. See Elementor.

Troubleshooting

My menu doesn't appear

The header shows page titles I didn't want

That is the no-menu fallback. Assign a menu and the fallback disappears.

The mobile menu won't open

Navigation icons

Add icons to your menu items.

Dark mode

The toggle in the header and how it behaves.

Introduction

Getting started

Customization

Header and menus

Header and menus

What is in the header

Logo

Primary menu

Theme toggle

Two CTA buttons

Creating and assigning a menu

Nested dropdowns

Multiple levels

Keyboard accessible

Outside-click to close

Viewport-aware

Mobile menu

Sticky or scroll behaviour

Hiding the header on specific pages

Header customization is limited by design

Troubleshooting

Navigation icons

Dark mode

​Header and menus

​What is in the header

Logo

Primary menu

Theme toggle

Two CTA buttons

​Creating and assigning a menu

​Nested dropdowns

Multiple levels

Keyboard accessible

Outside-click to close

Viewport-aware

​Mobile menu

​Sticky or scroll behaviour

​Hiding the header on specific pages

​Header customization is limited by design

​Troubleshooting

​Related

Navigation icons

Dark mode

Header and menus

What is in the header

Creating and assigning a menu

Nested dropdowns

Mobile menu

Sticky or scroll behaviour

Hiding the header on specific pages

Header customization is limited by design

Troubleshooting

Related