> ## 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.

# Mobile menu and dropdowns

> The mobile menu won't open, or dropdowns are off-screen.

Navigation problems, nearly all of which come down to a JavaScript conflict.

## The mobile menu will not open

> **Nothing happens when you tap the toggle**
>
> Almost always a JavaScript error. Open the browser console and reload — the error is almost always visible there.

> **The toggle animates but nothing expands**
>
> A CSS conflict — something setting `overflow: hidden`, `height: 0`, or a conflicting `z-index` on the header.

> **It works on desktop but not mobile**
>
> Test on a real device. Browser responsive mode does not accurately reproduce viewport behaviour, and it does not reproduce touch events.

### Find the JavaScript error

**1. Open the console**

Desktop: `F12` or `Ctrl`/`Cmd` + `Shift` + `J`. iOS Safari: enable Web Inspector in **Settings → Safari → Advanced → Web Inspector**, then connect to your Mac.

**2. Reload the page**

**3. Look for red errors**

Note the file and line. A plugin or theme file name usually appears.

**4. Deactivate that plugin**

Reload and confirm the menu works.

## A dropdown is off-screen

The theme already handles this: dropdowns **flip to the opposite side** when they would overflow the viewport, and horizontal overflow is detected automatically.

**Confirm the flip is running**

Open a dropdown near the right edge of a wide window. It should open leftwards. If it does not,
the theme's script is not running or is being overridden.

If a dropdown still disappears:

| Cause | Fix |
| - | - |
| A plugin overriding header styles | Deactivate header/menu plugins and retest |
| A custom `overflow: hidden` on an ancestor | Find and remove it in custom CSS |
| The menu item is very wide | Shorten the label |
| Caching serving old CSS | Clear caches |

## Submenus will not open

> **Desktop dropdowns do not open**
>
> JavaScript conflict. Console first.

> **Mobile submenus do not expand**
>
> Some themes and plugins interfere with click handling on touch devices. Check whether a plugin is binding click handlers on the header.

> **Keyboard navigation is broken**
>
> `Escape` should close an open submenu and return focus to its parent. If focus is lost, a plugin is likely trapping or clearing it.

## Menu items link to 404s

**This is not a menu bug**

It almost always means the demo menu is still in place after you deleted or renamed the demo
pages.

**1. Open your menu**

**Appearance → Menus**.

**2. Check each item**

The demo menu links to `/home/`, `/about/`, `/services/`, `/contact/`, and `/blog/`.

**3. Remove or repoint stale items**

**4. Also check the header CTA buttons**

The primary CTA defaults to `#features`, an anchor inside the demo homepage. The secondary defaults to `/contact/`. Both are in **Customize → Vara SaaS → Layout**.

This is item 1 on the [launch checklist](/getting-started/launch-checklist.md).

## The header shows a page list instead of your menu

That is the **no-menu fallback**. If no menu is assigned to the **Primary Menu** location, the theme renders a list of your top-level pages so the header is never unclickable.

**1. Open menu settings**

**Appearance → Menus → Settings**.

**2. Assign a menu**

Tick the box next to your menu under **Primary Menu**.

**3. Save**

> [!NOTE]
>
> This fallback renders a valid nested list rather than WordPress's default `wp_page_menu()` output, which produces orphaned list items that fail accessibility checks. Version 1.0.7 replaced it for exactly that reason.

## Menu icons are not appearing

| Problem | Cause | Fix |
| - | - | - |
| Icons off entirely | Feature not enabled | Turn on **Enable menu icons** |
| Icon fields missing | No menu assigned | Assign a menu to **Primary Menu** first |
| Icon renders as a box | Font Awesome 5 syntax | Use `fa-solid fa-rocket`, not `fas fa-rocket` |
| Icon is the wrong colour | Explicit colour set | Clear the colour field to inherit |
| No field for a menu item | Item is not in the primary menu | The fields are per primary-menu item |

See [Navigation icons](/customization/navigation-icons.md).

## Diagnosing any navigation problem

**1. Check the console**

A JavaScript error explains most navigation failures outright.

**2. Deactivate all plugins**

Does the menu work now?

**3. Bisect if not**

Reactivate in halves to find the culprit.

**4. Test with a default menu**

**Appearance → Menus** → create a menu with three top-level items and no submenus. If that works, the problem is your menu structure, not the theme.

**5. Test on a real device**

Not a browser's responsive preview.

**6. Clear all caches**

Cached JavaScript is a common culprit, especially after a theme update.

> [!WARNING]
>
> **Clear your caching plugin after any theme update.** Cached JavaScript is one of the most common causes of a menu that worked before and stopped.

## Related

> **[Header and menus](/customization/header-and-menus.md)**
>
> How the menu is supposed to work.

> **[Plugin conflicts](/troubleshooting/plugin-conflicts.md)**
>
> The full bisect procedure.


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