“I want every beginner to be fully empowered and knowledgeable. My vision is that no developer should ever have to struggle or feel stuck when facing a technical hurdle. When they land on my website, they should find an instant, seamless solution to their problem without any difficulty. Here, I am going to teach them everything—from how to create menus in WordPress to advanced coding techniques—so that every type of user, regardless of their skill level, can utilize this platform and grow.”
Early in my career, I handed over a completed WordPress site to a client. The design was clean, the content was good, the page speed was fast. But I had rushed through the navigation setup.
The homepage linked to the services page. The services page had no link back to the homepage. The blog was accessible from the homepage but invisible from any other page. The contact form was on a page that was not in any menu at all.
The client tested the site for ten minutes and then called me. “I can’t find my way around,” they said.
They were right. The site worked perfectly in isolation — each page loaded correctly — but as a connected experience for a visitor, it was a maze. Three weeks of design work had been undermined by a navigation structure that had been built in ten minutes without any thought.
Navigation menus are the most underplanned element in most WordPress builds. This guide covers how to build them correctly from the start.
Why Navigation Structure Affects SEO, Not Just Usability
Most people treat WordPress navigation as a purely visual decision — which pages look good in the header. It is also a technical SEO decision that affects how Google crawls and understands your site.
Internal link distribution. Every link in your navigation menu is a sitewide internal link — it appears on every page. Google weighs these links heavily when determining which pages on your site are most important. If your homepage, about page, and services page are in the primary menu, Google receives a clear signal that these are the pages that matter most on your domain.
Crawl efficiency. Google’s crawler follows links to discover pages. A page that is only accessible through deep content — buried three links away from the homepage, never appearing in navigation — gets crawled less frequently and is harder for Google to associate with your site’s main topics. Pages in the primary navigation get crawled on every visit to any page on your site.
Bounce rate and session depth. A visitor who cannot figure out where to go next leaves. High bounce rate signals to Google that your site did not satisfy the visitor’s need. Clear navigation keeps visitors moving through the site, which increases session depth and signals relevance to Google.
Before naming menu items, use the WP Skillz Keyword Ideas Generator to check what your audience actually types. “WordPress Maintenance Services” is a better menu label than “Services” because it contains a keyword your target visitors search for — and it clarifies what service you actually offer before the click.
How to Create a WordPress Navigation Menu — Complete Steps
Step 1 — Access the Menu Builder
Log into your WordPress admin panel. In the left sidebar, hover over Appearance and click Menus.
If you have never created a menu before, you will see an option to create your first menu. Click Create a new menu.
Step 2 — Name the Menu
Give your menu a descriptive name. “Primary Menu” or “Main Navigation” are fine — this name only appears in the WordPress admin, not on the public site. The name helps you identify which menu is which when you have multiple menus (primary header, footer navigation, sidebar).
Step 3 — Add Pages to the Menu
On the left side of the screen, you see expandable panels: Pages, Posts, Custom Links, and Categories.
Open the Pages panel. You will see a list of your published pages. Check the boxes next to the pages you want to include and click Add to Menu. The pages appear on the right side as menu items.
Common pages to include in a primary navigation:
- Home
- About or About Us
- Services or What We Do
- Blog or Articles
- Contact
Keep primary navigation lean. Five to seven items is typically the right number. More than seven creates visual clutter and dilutes the link weight distributed to each item.
Step 4 — Create Dropdown Submenus (Optional)
Dropdown menus organize related content under a parent category without adding more items to the main navigation bar.
To create a dropdown: in the menu builder, drag a menu item slightly to the right and position it below a parent item. It indents to show it is a sub-item. When a visitor hovers over or clicks the parent item, the sub-items appear as a dropdown.
Example structure:
Services (parent)
└ WordPress Development (sub-item)
└ SEO Consulting (sub-item)
└ Site Maintenance (sub-item)Keep dropdowns to one level where possible. Multi-level nested dropdowns (dropdowns within dropdowns) are confusing on desktop and nearly unusable on mobile.
Step 5 — Assign the Menu to a Location
This is the step most beginners miss, which is why menus appear to “disappear” after creation.
Creating a menu does not display it on the site. You have to assign it to a theme location.
Scroll to the bottom of the menu builder. Find Menu Settings and the Display location checkboxes. Every WordPress theme registers one or more menu locations — typically “Primary Menu” and “Footer Menu” at minimum.
Check Primary Menu to display your menu in the main site header.
If these checkboxes do not appear, your theme handles menu assignment differently. See the Astra-specific fix in the next section.
Step 6 — Save
Click the blue Save Menu button. Visit your site’s homepage to confirm the menu appears in the header.
The Astra Theme Menu Fix — When the Menu Is Invisible
Astra is the most popular WordPress theme. It is also the theme that generates the most “why is my menu not showing?” questions, because Astra uses a header builder system that is different from standard WordPress menu assignment.
If you assigned your menu to “Primary Menu” in Appearance > Menus but it does not appear on your Astra site, here is the reason: Astra’s header layout is managed through its own Header Builder, which has a separate assignment system from WordPress’s built-in menu locations.
The fix:
- Go to Appearance > Customize
- Click Header Builder in the Astra customization panel
- You will see a visual grid showing your header layout with rows and columns
- Look for the “Primary Menu” widget in the Available Widgets section below the grid
- Drag the Primary Menu widget into one of the header grid slots
If the Primary Menu widget is already in the grid but the menu is invisible, check the transparency settings. Astra’s transparent header option sometimes renders menu text in white — invisible against a white or light background. Go to Header Builder > Primary Header and look for color settings.
If menu items appear but the dropdown menus are not triggering on click, check that you do not have a JavaScript error in the console (press F12 in Chrome > Console tab). Plugin conflicts are the most common cause of broken dropdown behavior.
Use the WP Skillz Website Technology Detector on your own site to see what plugins and scripts are loading on the page. If an unexpected script appears that you did not intentionally add, it may be the source of a JavaScript conflict affecting your navigation.
Mobile Navigation — The Part Most Builds Get Wrong
Mobile traffic accounts for over 65% of web visits. Your navigation experience on a phone is more important than the desktop experience for most sites.
WordPress themes handle mobile navigation through a “hamburger menu” — the three-line icon that collapses the full navigation into a compact menu for smaller screens. Test this specifically, not through Chrome DevTools emulation but through the WP Skillz Responsive Website Checker, which simulates actual device viewports at 390px (iPhone), 360px (Android), and 768px (tablet).
Specific things to check on mobile navigation:
Tap target size. Apple’s Human Interface Guidelines recommend tap targets of at least 44×44 pixels. Google’s guidelines suggest 48×48 pixels. Menu links with inadequate padding are difficult to tap accurately — visitors accidentally tap adjacent items. This is a common Google Search Console mobile usability error: “Clickable elements too close together.”
If your menu links look cramped on mobile, add explicit padding in CSS:
css
@media (max-width: 768px) {
.nav-links li a {
padding: 12px 16px;
min-height: 44px;
display: flex;
align-items: center;
}
}Dropdown behavior on touch. Desktop dropdown menus typically activate on hover. Hover events do not exist on touch screens — only tap events. A mobile visitor who taps a parent menu item expecting to navigate to that page should not be trapped in a dropdown trigger. Test every parent menu item on an actual mobile viewport to confirm the tap behavior matches user expectations.
Hamburger menu visibility. The hamburger icon button must be easily visible against your header background color. A dark hamburger icon on a dark header — or a light icon on a white header — is functionally invisible. Check color contrast specifically on mobile viewport sizes.
Building a Custom Responsive Navigation Menu (Code Method)
For developers who want a lightweight custom menu without relying on theme-generated navigation — useful for highly customized headers or performance-critical builds — here is a clean, responsive implementation.
Test this in the WP Skillz Free Online Code Compiler before adding it to any live site. Paste the HTML, CSS, and JavaScript separately into the respective editors and verify the behavior across viewport sizes.
HTML:
html
<nav class="wp-nav">
<div class="nav-wrapper">
<div class="nav-brand">Your Brand</div>
<ul class="nav-list" id="main-nav">
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/contact/" class="nav-cta">Contact</a></li>
</ul>
<button class="nav-toggle" onclick="toggleNav()" aria-label="Toggle navigation">☰</button>
</div>
</nav>CSS:
css
.wp-nav {
background: #0f172a;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 100;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.nav-brand {
color: #38bdf8;
font-size: 1.4rem;
font-weight: 700;
}
.nav-list {
display: flex;
list-style: none;
gap: 8px;
margin: 0;
padding: 0;
}
.nav-list a {
color: #cbd5e1;
text-decoration: none;
padding: 8px 16px;
border-radius: 4px;
transition: background 0.2s, color 0.2s;
display: block;
min-height: 44px;
display: flex;
align-items: center;
}
.nav-list a:hover {
color: #38bdf8;
background: rgba(56, 189, 248, 0.1);
}
.nav-cta {
background: #38bdf8;
color: #0f172a !important;
font-weight: 600;
}
.nav-cta:hover {
background: #7dd3fc !important;
}
.nav-toggle {
display: none;
background: none;
border: none;
color: #fff;
font-size: 1.5rem;
cursor: pointer;
padding: 8px;
min-width: 44px;
min-height: 44px;
}
@media (max-width: 768px) {
.nav-toggle { display: block; }
.nav-list {
display: none;
flex-direction: column;
position: absolute;
top: 64px;
left: 0;
width: 100%;
background: #0f172a;
padding: 16px;
border-top: 1px solid #1e293b;
gap: 4px;
}
.nav-list.open { display: flex; }
.nav-list a {
padding: 14px 16px;
border-radius: 4px;
}
}JavaScript:
javascript
function toggleNav() {
const nav = document.getElementById('main-nav');
nav.classList.toggle('open');
}
// Close menu when a link is clicked on mobile
document.querySelectorAll('.nav-list a').forEach(link => {
link.addEventListener('click', () => {
document.getElementById('main-nav').classList.remove('open');
});
});What this code does differently from most examples:
min-height: 44pxon all links ensures every tap target meets Apple and Google’s minimum sizeposition: sticky; top: 0keeps the navigation visible as users scrollaria-label="Toggle navigation"on the hamburger button makes the menu accessible to screen readers- Closing the mobile menu when a link is clicked prevents the common UX issue of the menu remaining open after navigation
Auditing Your Navigation After Launch
Building the menu is step one. Verifying it works correctly across all conditions is step two.
Speed test after menu plugins. If you installed a mega menu plugin or an icon menu plugin, run the Website Speed Test to confirm the plugin has not significantly increased page weight. Navigation plugins that add 300KB of JavaScript to every page load are common and worth identifying before they affect your rankings.
Mobile responsive verification. Use the Responsive Website Checker on three specific pages: homepage, a blog post, and your contact page. Navigation often behaves differently on inner pages than the homepage — particularly when page builders apply different header templates to different page types.
Security scan. Navigation plugins — particularly mega menu builders — are a common target for script injection. After installing any menu plugin, run the Website Malware Scanner to confirm the plugin files are clean.
Navigation Menu Checklist
Planning:
- Primary navigation items identified — five to seven pages maximum
- Menu item labels checked against actual search terms people use
- Dropdown structure planned before building
Building:
- Menu created in Appearance > Menus
- All required pages added
- Dropdown sub-items positioned correctly (indented under parent)
- Menu assigned to correct theme location (Primary Menu)
- Saved and verified visible on homepage
Mobile verification:
- Responsive check run at 390px, 360px, 768px
- Hamburger menu visible and tappable
- Dropdown behavior correct on touch
- All tap targets minimum 44×44 pixels
Performance:
- Speed test run after menu plugins installed — no significant regression
- Navigation loads cleanly without JavaScript errors (check browser console)
Frequently Asked Questions
Why is my WordPress menu not showing after I created it? The most common cause is not assigning the menu to a theme location. In Appearance > Menus, scroll to Menu Settings and check the Display Location (usually “Primary Menu”). If using Astra, the menu must be placed in the Header Builder grid — standard WordPress menu location assignment does not work for Astra headers.
How do I create a dropdown menu in WordPress? In the menu builder (Appearance > Menus), drag a menu item to the right and place it below a parent item. It indents to become a sub-item. Save the menu and test the dropdown by hovering over the parent item on desktop, or tapping it on mobile.
How do I fix a WordPress menu that looks broken on mobile? Test using the Responsive Website Checker at 390px viewport. Most mobile menu issues are caused by tap targets being too small, hover-dependent dropdowns that do not work on touch, or hamburger button color invisible against the header background. The CSS fixes for each are covered in the mobile section above.
Should I use a mega menu plugin? Only if your site’s content genuinely requires it — typically large e-commerce stores or directory sites with many categories. Mega menu plugins add significant JavaScript to every page. For most blogs and small business sites, a well-structured standard dropdown menu handles the organizational needs without the performance cost.
How many items should a WordPress navigation menu have? Five to seven items for a primary menu. More than seven creates visual clutter and dilutes the internal link weight distributed to each menu item. If you have more than seven pages that need prominent navigation, use a combination of primary navigation and footer navigation, or use dropdown sub-menus to group related pages.
Conclusion — Plan the Navigation Before You Build the Pages
The site I described at the start was a good site with broken navigation. Every individual element worked — the pages loaded, the content was clear, the design was clean. But a visitor had no map for moving through it.
Good navigation comes from planning, not from adding links as you think of them. Before touching Appearance > Menus, decide which five to seven pages are most important. Decide if any of them need dropdown sub-pages. Check what keywords your target audience uses to name those categories.
Then build the menu, verify it on mobile, test the speed impact, and run the security scan. That sequence takes 20 minutes and prevents the kinds of navigation problems that affect both visitor experience and SEO for months.
Connect with me on LinkedIn if you are building a specific navigation structure and want a second opinion on the organization.
Waseem Aijaz — WordPress Developer & SEO Specialist, WP Skillz Responsive Website Checker | All Dev Tools | About WP Skillz
