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

​
The mobile menu will not open

Almost always a JavaScript error. Open the browser console and reload — the error is almost always visible there.
A CSS conflict — something setting overflow: hidden, height: 0, or a conflicting z-index on the header.
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. If a dropdown still disappears:
JavaScript conflict. Console first.
Some themes and plugins interfere with click handling on touch devices. Check whether a plugin is binding click handlers on the header.
Escape should close an open submenu and return focus to its parent. If focus is lost, a plugin is likely trapping or clearing it.
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.

​
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

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.
See Navigation icons.

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

Header and menus

How the menu is supposed to work.

Plugin conflicts

The full bisect procedure.