How to Style WordPress Navigation Menus
Navigation is one of the first things visitors interact with on any website. When your menu is clean, well-structured, and visually appealing, users can find what they need quickly and search engines can better understand your site’s hierarchy. Learning how to style WordPress navigation menus properly gives you control over both user experience and branding, without sacrificing performance.
Table of contents
Understanding How WordPress Menus Work
Before applying custom styling, it helps to know how WordPress builds its menus under the hood. The platform uses a combination of the admin menu builder, registered menu locations in your theme, and a built-in menu walker that outputs semantic HTML.
The Menu Builder in the Dashboard
In the admin area, the menu manager lets you:
- Create one or multiple menus
- Assign them to theme locations such as primary, secondary, footer, or mobile
- Add pages, posts, categories, custom links, and more
- Reorder and nest items to create multi-level navigation
Once a menu is assigned to a location, WordPress uses your theme’s template files to output the menu markup on the front end.
The wp_nav_menu Function
Most themes render navigation using wp_nav_menu() in their template files (commonly in header.php). A simplified example looks like this:
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => 'nav',
'menu_id' => 'primary-menu',
) );
?>
This function generates a structure similar to:
<nav>
<ul id="primary-menu" class="menu">
<li class="menu-item menu-item-type-post_type">
<a href="...">Home</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="...">Services</a>
<ul class="sub-menu">
<li class="menu-item"><a href="...">Consulting</a></li>
</ul>
</li>
</ul>
</nav>
Most of your styling work will target these elements and the default classes added by WordPress.
Core CSS Targets for Styling Menus
Styling a navigation menu effectively comes down to understanding which selectors to use. WordPress adds helpful classes and IDs automatically, so you rarely need to modify the markup.
Common Menu Classes
Useful default selectors include:
- .menu – applied to the top-level list container
- .menu-item – each individual menu item
- .menu-item-has-children – items that have a submenu
- .sub-menu – nested unordered lists representing dropdowns
- .current-menu-item – the active item for the current page
- .current-menu-ancestor – parents of the current item
By targeting these classes in your stylesheet, you can create horizontal layouts, dropdowns, button-like links, and more, all without altering the HTML output.
Basic Horizontal Menu Styling
Most primary navigation menus are horizontal, with links aligned in a row. You can achieve this using flexbox or inline-blocks; flexbox is the most modern and flexible approach.
Horizontal Layout with Flexbox
The following snippet turns the top-level list into a horizontal bar:
nav ul.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 1.5rem;
align-items: center;
}
nav ul.menu > li {
position: relative;
}
nav ul.menu a {
text-decoration: none;
display: block;
padding: 0.75rem 0;
color: #222;
font-weight: 500;
}
Key points:
- list-style: none removes default bullets.
- display: flex lays out menu items in a row.
- gap cleanly spaces items without custom margins.
- position: relative prepares items for dropdown positioning later.
Adding Hover and Active State Styles
Hover and active states give users feedback and help indicate where they are on the site. WordPress already adds classes for current items; your job is to style them consistently.
Hover States
nav ul.menu a:hover,
nav ul.menu a:focus {
color: #0073aa;
}
It’s good practice to combine :hover and :focus so keyboard users get the same visual feedback as mouse users.
Highlighting the Current Page
nav ul.menu .current-menu-item > a,
nav ul.menu .current-menu-ancestor > a {
color: #0073aa;
border-bottom: 2px solid #0073aa;
}
This approach clearly marks the user’s current section and its parent menu item, reinforcing the site’s structure.
Styling Dropdown Menus
Dropdowns (submenus) are common in larger navigation menu structures. WordPress handles the markup for you; you only need to apply the right CSS to create the dropdown effect.
Base Dropdown Styles
Start by positioning submenus absolutely and hiding them by default:
nav ul.menu li ul.sub-menu {
list-style: none;
margin: 0;
padding: 0.5rem 0;
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background: #fff;
border: 1px solid #eee;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: 999;
}
nav ul.menu li ul.sub-menu li a {
padding: 0.5rem 1rem;
white-space: nowrap;
}
This positions the submenu just below the parent item and sets up a subtle animation for when it appears.
Showing the Dropdown on Hover
nav ul.menu li:hover > ul.sub-menu,
nav ul.menu li:focus-within > ul.sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
:focus-within ensures that keyboard users can access the submenu when tabbing through links, improving accessibility.
Responsive Navigation Styling
Navigation that works on desktop but breaks on mobile is a common problem. Good styling includes a mobile-friendly layout and a clear way to access the menu on small screens.
Stacked Mobile Layout
At narrower widths, it often makes sense to stack menu items vertically:
@media (max-width: 768px) {
nav ul.menu {
flex-direction: column;
gap: 0;
align-items: flex-start;
}
nav ul.menu a {
padding: 0.75rem 0;
width: 100%;
border-bottom: 1px solid #f0f0f0;
}
nav ul.menu li ul.sub-menu {
position: static;
box-shadow: none;
border: 0;
transform: none;
opacity: 1;
visibility: visible;
padding-left: 1rem;
}
}
This media query removes the absolute positioning and transforms submenus into simple indented lists, which are easy to navigate on touch devices.
Using a Toggle for the Mobile Menu
A full mobile menu experience typically includes a toggle button (often a “hamburger” icon). While the toggle involves some JavaScript, the styling is handled with CSS:
.menu-toggle {
display: none;
}
@media (max-width: 768px) {
.menu-toggle {
display: inline-block;
background: none;
border: 0;
font-size: 1rem;
cursor: pointer;
}
nav ul.menu {
display: none;
}
nav ul.menu.is-open {
display: flex;
}
}
You can then add or remove the is-open class with a simple script so that tapping the toggle shows or hides the menu. This pattern maintains performance while giving mobile users a clear control for the navigation.
Using Custom Menu Classes for Advanced Styling
Sometimes you need special styling for specific menu items: a “Sign Up” button, a highlighted “New” link, or a call-to-action in the menu. WordPress supports this via custom CSS classes assigned directly in the menu editor.
Enabling CSS Classes in the Menu Screen
In the menu editor, use the “Screen Options” panel at the top to enable the CSS Classes field. Once enabled, each menu item allows you to define additional classes.
For example, you might add:
- menu-cta – highlight a call-to-action
- menu-highlight – emphasize a specific category
- menu-icon-home – show an icon next to the label
Styling a Call-to-Action Menu Item
nav ul.menu .menu-cta > a {
background: #0073aa;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 999px;
}
nav ul.menu .menu-cta > a:hover,
nav ul.menu .menu-cta > a:focus {
background: #005f8d;
}
This makes the item stand out as a button, ideal for “Get Started,” “Register,” or “Contact” links in your navigation menu.
Styling Navigation in Block Themes
With the introduction of site editing and the navigation block, you can manage your menu differently depending on whether your theme is classic or block-based. Styling block-based navigation menus can be achieved via theme.json, the editor settings, or traditional CSS.
Leveraging the Navigation Block
In block themes, the navigation block lets you:
- Visually build menu structures in templates and template parts
- Adjust font size, line height, and colors from the editor
- Control layout, orientation, and responsive behavior without code
These settings output inline styles or CSS variables that you can override in your stylesheet for more advanced tweaking.
Customizing via theme.json
If your theme uses a configuration file, you can define global styles for navigation elements. A simplified example:
{
"styles": {
"blocks": {
"core/navigation": {
"typography": {
"fontSize": "16px",
"fontWeight": "500"
},
"color": {
"text": "#222"
}
}
}
}
}
This centralizes typography and color for all navigation menus in your theme, helping maintain consistency across templates.
Improving Accessibility in Styled Menus
Visual design should never come at the cost of accessibility. Screen reader support, keyboard navigation, and adequate contrast are essential for well-styled navigation menus.
Color Contrast and Focus States
Ensure links have sufficient contrast against the background and that focusable elements are clearly visible when tabbing through the page.
nav ul.menu a:focus {
outline: 2px solid #005f8d;
outline-offset: 2px;
}
Using a visible outline balances custom aesthetics with accessibility best practices.
Dropdowns and Keyboard Navigation
For multi-level navigation, keyboard users should be able to:
- Tab into the parent item
- Use arrow keys or tab to move through submenu items
- Close submenus without losing track of focus
While some of this behavior requires JavaScript, your CSS can support it by using :focus-within, avoiding styles that rely solely on hover, and maintaining a logical visual structure that matches the source order.
SEO Considerations for Navigation Styling
Styling itself doesn’t change how search engines read your site, but the way you structure and place navigation menu items does have SEO implications. Good design helps highlight important pages and improve crawlability.
Clear Hierarchy and Descriptive Labels
A well-organized navigation menu makes it easy for both users and search engines to understand which pages are most important. To optimize your menus for search:
- Use descriptive labels instead of vague terms like “Stuff” or “More”
- Group related pages into logical parent categories
- Limit the number of top-level items to avoid clutter
- Ensure critical pages are reachable within a few clicks
Styling can then reinforce this hierarchy through font size, color, spacing, and grouping.
Internal Linking and Menu Placement
Primary navigation menu links appear on most pages, making them valuable internal links. Place your navigation where users expect it (typically at the top and possibly in the footer) and avoid hiding essential links behind overly complex interactive effects that might impede usability.
Performance-Friendly Menu Styling
Complex navigation can easily become bloated with unnecessary assets. Keeping your styles lean ensures menus render quickly and consistently across devices.
Reducing CSS Bloat
- Group common styles for links to avoid duplicating rules.
- Use simple selectors targeting WordPress’s built-in classes.
- Limit the number of font families and weights for better loading times.
- Avoid heavy background images in navigation bars; favor gradients or flat colors when possible.
Well-structured CSS makes it easier to refine your design later without rewriting everything.
Practical Workflow for Styling a Menu
When approaching a new project or redesign, follow a repeatable process to keep navigation styling manageable and consistent.
Step-by-Step Approach
- Plan the structure: Decide which pages belong in the primary navigation menu and how dropdowns should be organized.
- Review the markup: Inspect the output of wp_nav_menu() to understand existing classes and structure.
- Define base styles: Style the top-level ul and li elements for layout and spacing.
- Add state styles: Implement hover, focus, and active item styling using existing classes.
- Style dropdowns: Create and test submenu behavior on both desktop and touch devices.
- Optimize for mobile: Add responsive breakpoints and, if necessary, a toggle for the navigation menu.
- Test accessibility: Navigate the site with a keyboard and use accessibility tools to verify color contrast.
By following this workflow, you can consistently create navigation designs that are visually appealing, accessible, and aligned with your brand.
Conclusion
Effective styling of WordPress navigation menus is about more than colors and spacing. By leveraging the platform’s built-in classes, understanding how the menu system works, and focusing on responsive behavior and accessibility, you can create navigation that feels polished and intuitive on every device.
Start with a solid structural foundation, layer on clear hover and active states, refine dropdown behavior, and then adjust for mobile. As you iterate, treat your navigation menu as a core component of your site’s user experience and internal linking strategy, not just another design element. With this mindset and the techniques covered here, your menus will not only look better, they’ll support better engagement and search visibility as well.
