WordPress Menu Not Appearing on Website - Display Fix

You go to Appearance > Menus in WordPress.

You create a new menu. You name it "Main Menu".

You add menu items. Homepage, About, Services, Contact.

You go to "Display location" and select "Primary Menu".

You click "Save Menu".

You visit your website.

No menu appears.

Where your navigation should be, there's just empty space.

You check the admin again. The menu is there. Items are assigned. Display location says "Primary Menu".

But the front end is blank.

A client called us. They'd just rebuilt their WordPress navigation. They spent 2 hours organizing menu items, creating categories, setting up submenus. Everything looked perfect in the admin.

Then they checked the website.

No menu.

Not broken. Not styled weirdly. Just completely invisible.

They thought they wasted 2 hours. We found the problem in 2 minutes.

The theme didn't support menus. It had a hardcoded navigation in the theme files. The WordPress menu system was set up, but the theme wasn't using it.

A simple theme change or a fallback fix got the menu displaying immediately.

Menu issues always have a simple cause. But there are 8 different causes that look identical from the outside: blank menu, no navigation.

Here's how to diagnose which one is yours and fix it.

---

Why WordPress Menus Don't Appear

Understanding the possible causes helps you identify the fix.

• Menu not assigned to location: Menu exists but isn't set to display anywhere
• Theme doesn't support menus: Theme has hardcoded navigation, doesn't use WordPress menu system
• Menu location doesn't exist: Theme only has footer menu location, you're trying to set primary menu
• Menu items not added: You created menu but forgot to add items to it
• CSS hiding the menu: Menu exists but CSS sets display:none or visibility:hidden
• Mobile menu not showing: Menu works on desktop but hidden on mobile (responsive design issue)
• Theme customizer override: Custom theme settings override menu display
• Plugin conflict: Menu plugin or cache plugin interfering with display
• JavaScript error: Menu code is there but JavaScript broken, so dropdown/mobile menu doesn't function

Most of the time, it's #1 (menu not assigned to location) or #2 (theme doesn't support menus).

---

Step 1: Verify Menu Exists and Has Items

Start with the basics. Make sure the menu actually exists.

Check menu exists

1. Go to Appearance > Menus
2. Look at "Menu Settings" section
3. See list of menus below
4. Is there at least one menu listed?
5. If no menus exist, create one:
   • Click "Create New Menu"
   • Name it "Main Menu"
   • Click "Create Menu"

Check menu has items

1. Click the menu name to open it
2. Look for menu items listed
3. See a list like "Home", "About", "Services", etc.?
4. If list is empty, add items:
   • On the left, look for "Add items to your menu"
   • Find "Pages" section
   • Select pages you want in menu
   • Click "Add to Menu"
   • Repeat for Custom Links if needed
5. Click "Save Menu" at bottom

---

Step 2: Assign Menu to Display Location

The menu must be assigned to a location where the theme displays it.

Find available display locations

1. Go to Appearance > Menus
2. Scroll to "Display location"
3. See a dropdown/checkbox list of locations
4. Common locations:
   • Primary Menu (top navigation)
   • Secondary Menu (header area)
   • Footer Menu (footer navigation)
   • Social Links (social media icons)

If no display locations appear

This likely means your theme doesn't support menus.

• Your theme may use hardcoded navigation
• The theme needs updating or replacing
• Continue to Step 5 to verify this

Assign menu to location

1. Check the checkbox next to "Primary Menu" (or main location for your theme)
2. Make sure your menu is selected in the dropdown above
3. Click "Save Menu"
4. Visit your website
5. Menu should now appear in the location where you assigned it

If multiple locations exist

1. Assign to PRIMARY first (top navigation is usually primary)
2. Visit website and verify it appears
3. Then assign to SECONDARY locations if needed
4. One menu can be assigned to multiple locations (will show everywhere)
5. Or create separate menus for each location

---

Step 3: Check Theme Has Menu Support

Some older or minimal themes don't have built-in menu support.

Look for "Display location" in menu editor

1. Go to Appearance > Menus
2. Open any menu
3. Scroll down to bottom
4. Look for section that says "Display location" or "Menu settings"
5. If this section exists, theme supports menus
6. If section doesn't exist, theme doesn't support menus (continue below)

Check theme supports menus in code

1. Go to Appearance > Theme File Editor
2. Look for functions.php in the file list (right side)
3. Click to open it
4. Search for text "register_nav_menu" or "register_nav_menus"
5. If found, theme supports menus
6. If not found, theme doesn't support menus

If theme doesn't support menus

You have two options:

• Option 1: Switch to a modern theme that supports menus (recommended)
• Option 2: Add menu support to your theme (advanced, requires coding)

Option 2 requires editing theme functions.php:

1. Go to Appearance > Theme File Editor
2. Open functions.php
3. Add this code at end of file (before ?> if it exists):

   // Register primary menu location
   function my_theme_register_menus() {
     register_nav_menus( array(
       'primary-menu' => __( 'Primary Menu' ),
     ) );
   }
   add_action( 'init', 'my_theme_register_menus' );

4. Save file
5. Now you'll see "Display location" section in Menus

Then add menu to theme template:

1. Edit header.php or index.php (wherever nav should appear)
2. Add this code where you want menu:

   <?php 
     wp_nav_menu( array(
       'theme_location' => 'primary-menu',
       'fallback_cb'    => 'wp_page_menu'
     ) );
   ?>

3. Save file
4. Menu should now display

If you're uncomfortable editing theme code, switch themes instead.

---

Step 4: Verify Menu Items Are Visible

Sometimes menu items exist but are hidden or set to not display.

Check menu items visibility

1. Go to Appearance > Menus
2. Open your menu
3. Look at each menu item
4. You may see checkboxes that say "Hide from menu" or similar
5. Uncheck any hidden items
6. Save menu

Check menu items have valid links

1. In menu editor, expand each menu item (click arrow/down icon)
2. Look at the link URL
3. Make sure it's not empty
4. Make sure it's a valid URL (starts with / or http)
5. If URL is broken, fix it or delete item
6. Save menu

Check menu item count

1. Expand all menu items in menu editor
2. Count how many items exist
3. Is count zero? Then no items to display (add items first)
4. Is count 5+ but menu still doesn't show on website?
5. Continue to next step

---

Step 5: Disable Plugins to Find Conflicts

A plugin might be preventing menu from displaying.

Disable all plugins temporarily

1. Go to Plugins > Installed Plugins
2. Select all plugins (check "Select All" checkbox at top)
3. Bulk Actions dropdown > Deactivate
4. Click Apply
5. All plugins now disabled
6. Visit website
7. Does menu appear now?

If menu appears after disabling plugins

A plugin is conflicting with menu display.

1. Reactivate plugins one by one
2. After each activation, visit website and check if menu still works
3. When menu disappears, you found the conflicting plugin
4. Either:
   • Disable that plugin permanently
   • Update plugin to latest version
   • Switch to alternative plugin

Common plugins that conflict with menus

• Page builders (visual builders may replace menu with custom navigation)
• Caching plugins (may serve cached version without menu)
• Menu-specific plugins (multiple menu plugins enabled)
• Header/footer builder plugins
• Security plugins (may block menu display)

If menu doesn't appear even with all plugins disabled

Menu issue is theme-related, not plugin-related. Continue to next steps.

---

Step 6: Check for CSS Hiding the Menu

Menu may exist but CSS is hiding it.

Inspect menu element in browser

1. Visit your website
2. Right-click on where menu should be
3. Select "Inspect" or "Inspect Element"
4. Developer tools open on right side
5. Look for HTML that contains menu (usually <nav> or <ul class="menu">)
6. If you see HTML menu element, menu IS there, just hidden by CSS

Check CSS for display:none

1. In developer tools, look at "Styles" panel
2. Look for rules with:
   • display: none
   • visibility: hidden
   • opacity: 0
   • width: 0 or height: 0
   • position: absolute with negative left/top
3. If found, CSS is hiding menu

Find where CSS is coming from

1. In developer tools Styles panel, click the .css filename
2. This tells you which CSS file has the hiding rule
3. Common files:
   • style.css (theme stylesheet)
   • custom.css (custom styles)
   • header.css or nav.css

Fix the CSS

1. Go to Appearance > Customize (or Theme File Editor)
2. Find the CSS file causing the issue
3. Look for .nav, .menu, or similar selector
4. Remove or change the hiding property
5. Instead of "display: none", use "display: block"
6. Save changes
7. Refresh website
8. Menu should appear

Example CSS fixes:

/* Wrong: hides menu */
.nav { display: none; }

/* Right: shows menu */
.nav { display: block; }

/* Wrong: hides menu */
nav ul { visibility: hidden; }

/* Right: shows menu */
nav ul { visibility: visible; }

---

Step 7: Fix Mobile Menu Not Showing

Menu appears on desktop but not on mobile. This is a responsive design issue.

Check mobile menu toggle button

1. Visit website on mobile device or use browser mobile view (F12 > Toggle Device Toolbar)
2. Look for hamburger menu icon (three horizontal lines)
3. Click it
4. Does menu appear?
5. If no, menu toggle isn't working

Inspect mobile menu HTML

1. On mobile view, right-click hamburger icon
2. Select "Inspect"
3. Look for button with class like "menu-toggle", "hamburger", "nav-toggle"
4. Click on it in the HTML
5. Check if it has JavaScript attached

Check for JavaScript errors

1. Open browser developer console (F12 > Console tab)
2. Visit website on mobile view
3. Look for red error messages
4. If you see errors, JavaScript is broken
5. Error messages will tell you which file is broken

Common mobile menu fixes

Problem	Cause	Fix
Hamburger icon not clickable	Button missing onclick handler	Add JavaScript event listener to toggle menu
Menu appears but is unreadable	CSS not optimized for mobile	Add responsive CSS rules for mobile viewport
Menu won't close after clicking item	Missing close function	Add JavaScript to close menu on item click
Menu styled wrong on mobile	Missing @media queries	Add mobile CSS breakpoints

Add basic mobile menu CSS if missing

1. Go to Appearance > Customize > Additional CSS
2. Add:

   /* Mobile menu styles */
   @media (max-width: 768px) {
     .nav { display: none; }
     .nav.active { display: block; }
     .menu-toggle { display: block; }
   }
   
   @media (min-width: 769px) {
     .nav { display: block; }
     .menu-toggle { display: none; }
   }

3. Save changes
4. Test on mobile

---

Step 8: Check Theme Customizer Settings

Some themes have customizer options that control menu display.

Go to theme customizer

1. Go to Appearance > Customize
2. Look for sections related to menu or navigation
3. Common sections:
   • "Menu" or "Navigation"
   • "Header"
   • "Layout"
   • "Advanced"

Check for display toggles

1. In menu-related section, look for toggles like:
   • "Show menu" or "Enable menu"
   • "Menu display" or "Menu visibility"
   • "Primary navigation" on/off
2. Make sure toggle is ON/enabled
3. Save changes if modified

Check menu assignment in customizer

1. Some themes have menu assignment in customizer too
2. Look for option like "Select Menu" or "Primary Menu"
3. Make sure correct menu is selected
4. Save changes
5. Visit website

---

Step 9: Clear Cache and Refresh

Cache plugins or browser cache may be serving old version without menu.

Clear WordPress cache

1. If using caching plugin (WP Super Cache, W3 Total Cache, etc.)
2. Go to plugin settings
3. Look for "Clear Cache" or "Purge Cache" button
4. Click to clear all cached pages
5. Visit website

Clear browser cache

1. Close browser completely
2. Or use Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac)
3. Select "Clear browsing data"
4. Select time range "All time"
5. Check "Cached images and files"
6. Click "Clear data"
7. Reopen website

Clear Cloudflare cache (if using)

1. If using Cloudflare CDN, go to dashboard
2. Click "Purge Cache"
3. Select "Purge Everything"
4. Wait for cache to clear
5. Visit website

---

Step 10: Use WordPress Menu Fallback

If theme has menu location but menu doesn't show, use fallback.

What is fallback?

A fallback displays automatic navigation if menu isn't assigned. Options:

• Show most recent pages
• Show category list
• Show custom HTML
• Show nothing

Add fallback to theme

1. Go to Appearance > Theme File Editor
2. Find where menu is displayed (look for wp_nav_menu call)
3. Check if it has 'fallback_cb' parameter
4. If not, add fallback:

   <?php
   wp_nav_menu( array(
     'theme_location' => 'primary-menu',
     'fallback_cb'    => 'wp_page_menu'  // Shows pages as backup
   ) );
   ?>

5. Save file
6. Now if menu isn't assigned, pages display automatically

Better fallback: custom message

<?php
if ( !has_nav_menu( 'primary-menu' ) ) {
  echo '<nav class="main-navigation">';
  echo '<p>Please assign a menu to the Primary Menu location.</p>';
  echo '</nav>';
} else {
  wp_nav_menu( array(
    'theme_location' => 'primary-menu'
  ) );
}
?>

This shows helpful message in admin when menu isn't assigned.

---

Real-World Menu Not Appearing Story

Scenario: A client switched WordPress themes. New theme looked beautiful. But after activation, the navigation menu disappeared completely. The menu existed in wp-admin but wasn't showing on the website.

What happened:

1. Old theme supported menus
2. Menu was assigned to "Primary Menu" location
3. When switching to new theme, new theme didn't have "Primary Menu" location
4. New theme had different location names: "Main Navigation" and "Footer"
5. Menu was still assigned to non-existent "Primary Menu" location
6. So menu didn't display anywhere

What we did:

1. Checked new theme's available menu locations (Appearance > Menus)
2. Saw it only offered "Main Navigation" and "Footer"
3. Reassigned existing menu to "Main Navigation" location
4. Menu appeared immediately

The lesson: Each theme defines its own menu locations. When switching themes, menu assignments don't automatically migrate.

---

WordPress Menu Not Appearing Checklist

Menu missing from website?

• ✓ Verify menu exists (Appearance > Menus)
• ✓ Verify menu has items (check item count > 0)
• ✓ Verify menu is assigned to display location
• ✓ Verify theme has menu support (check for "Display location" section)
• ✓ Verify menu items are visible (not hidden)
• ✓ Verify menu item links are valid URLs
• ✓ Disable all plugins and check if menu appears
• ✓ If menu appears after disabling plugins, find conflicting plugin
• ✓ Inspect page in browser to see if menu HTML exists
• ✓ If HTML exists, check for CSS hiding menu (display: none)
• ✓ On mobile, check if hamburger toggle works
• ✓ Check theme customizer for menu-related settings
• ✓ Clear WordPress cache if using caching plugin
• ✓ Clear browser cache (Ctrl+Shift+Delete)
• ✓ Clear Cloudflare cache if using CDN
• ✓ Check browser console for JavaScript errors (F12)
• ✓ Verify correct menu assigned to correct theme location
• ✓ Check if theme supports menus (may need code addition)
• ✓ Test with simple menu (just 2-3 items) to isolate issue

---

When to Contact Hosting or Theme Support

Contact support if:

• Theme doesn't have menu location available (hosting may help verify)
• You need help adding menu support to custom theme
• JavaScript errors in console preventing mobile menu
• CSS file path doesn't match after theme update
• Menu appears in some browsers but not others
• Menu was working before plugin update
• You're unsure how to edit theme functions.php safely

What to tell them:

"My WordPress menu is created and assigned to a location, but it's not appearing on the website. I've checked the admin and the menu definitely exists. Can you help me troubleshoot why it's not displaying on the front end?"

Theme support can usually diagnose menu issues within 1-2 hours.

---

The Real Talk

Menu problems feel dramatic. Navigation is one of the most important parts of your site. Without it, visitors can't get anywhere.

But the panic makes people overthink it. They assume the worst: theme broken, WordPress corrupted, hackers.

In reality, menu problems have one of 5-6 specific causes. All fixable in minutes.

Most common: menu exists but isn't assigned to a location. You created it and filled it with items, but forgot the crucial last step of selecting where to display it.

Second most common: you switched themes and the new theme uses different menu location names. Your menu is assigned to "Primary Menu" but the new theme only recognizes "Main Navigation".

Both are 30-second fixes. Check menu assignment, confirm theme location, save.

The hardest menu issues are when you need to add code (giving theme menu support) or edit CSS (removing hiding rules). But even then, it's just understanding what the code does and making the obvious fix.

Your menu isn't gone. It's either just not configured to display, or something is actively hiding it. Find which of those it is, and you're done.