> ## Documentation Index
> Fetch the complete documentation index at: https://vr-it-services-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> How the site header, primary menu, and mobile menu work.

# Header and menus

# 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](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/header-and-menus-header.png)

## 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](/customization/layout-settings.md) — *left* puts the logo first and the rest to the right; *centered* centres the logo with navigation arranged around it.

## Creating and assigning a menu

**1. Create a menu**

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

**2. 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.

**3. Assign it**

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

**4. Save**

The header updates immediately.

![Screenshot: Appearance → Menus with the Primary Menu location checkbox ticked](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/header-and-menus-menu-assign.png)

> [!NOTE]
>
> 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](/customization/footer-settings.md).

> [!WARNING]
>
> **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](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/header-and-menus-dropdown.png)

**Mega menus**

The theme handles nested dropdowns well but does not include a megamenu builder. If you need
multi-column dropdowns with images, use a dedicated plugin — see
[Plugin compatibility](/integrations/plugin-compatibility.md).

## Mobile menu

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 |

> [!WARNING]
>
> **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**:

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

**Always test a sticky header on mobile**

A sticky header eats vertical space on a phone. Test it on a real device before shipping it, and
check that the admin bar does not push the header off-screen when logged in.

## Hiding the header on specific pages

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

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

```css theme={null}
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.

> [!NOTE]
>
> **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](/developers/child-themes.md).

> [!WARNING]
>
> **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](/integrations/elementor.md).

## Troubleshooting

> **My menu doesn't appear**
>
> Confirm it is assigned to the **Primary Menu** location under **Appearance → Menus → Settings**. A menu that exists but is not ticked in the location box will not render.

> **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**
>
> Almost always a JavaScript conflict. See [Mobile menu and dropdowns](/troubleshooting/mobile-menu.md).

> **A dropdown disappears off-screen**
>
> The theme flips dropdowns automatically. If this still happens, it is usually a plugin overriding the header styles — check [Plugin conflicts](/troubleshooting/plugin-conflicts.md).

## Related

> **[Navigation icons](/customization/navigation-icons.md)**
>
> Add icons to your menu items.

> **[Dark mode](/customization/dark-mode.md)**
>
> The toggle in the header and how it behaves.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.