The right way to style a WordPress navigation menu depends on your active theme. In a block theme, use Appearance > Editor and the Navigation block’s Styles and Settings panels. In a classic or hybrid theme, use Appearance > Menus, any theme-supported Customizer controls, and theme-specific CSS when necessary. Save your changes, then check the live menu at desktop and mobile widths.
First, identify your theme
Look at the WordPress dashboard before following any menu tutorial. Block themes build headers, navigation, templates and footers with blocks, while classic themes generally use PHP templates and expose a separate Menus screen. The distinction determines which controls you will see.
- Block theme: Go to Appearance > Editor. The Customizer is usually unavailable unless a plugin or theme adds it.
- Classic or hybrid theme: Check Appearance > Menus and the Customizer, if the theme supports it.
WordPress 5.9 was the last release to include the Menus screen for every site by default. WordPress 6.0 and later use the Navigation block for block themes, although plugins and hybrid themes can change what appears in your dashboard.
Style a menu in a block theme
Open the Navigation block
- Go to Appearance > Editor.
- Open the Header or another template part that contains your navigation.
- Select the Navigation block.
The Navigation block is designed to edit both a menu’s structure and its appearance. WordPress documents it here: Navigation block.
#1 Best Overall
Change typography, colors and spacing
Use the block’s Styles panel for font family, size, weight, line height and text or background colors. Layout controls set the menu’s orientation, alignment and justification. Dimension controls adjust padding, margin and block spacing. The Advanced tab and individual menu-item settings provide additional options where the theme supports them.
For a consistent design across the site, use the global Styles interface. Styles > Blocks can apply a design to the Navigation block type site-wide, while settings on one selected block limit the change to that menu instance. See the Styles overview for the current interface.
Configure submenus and the mobile overlay
In the Navigation block’s Settings, choose whether submenus open on hover or click, whether submenu arrows appear, and when the overlay is visible: never, on mobile, or always. When the menu collapses into an overlay, open and edit its overlay template part to control the mobile panel’s layout and styling.
Make sure the saved menu is actually displayed
Creating or editing a menu in Site Editor navigation management does not automatically place it on every page. Add a Navigation block to the intended Header or other template part, then assign the saved menu to that block and save. WordPress explains this placement workflow in Site Editor navigation.
Free tools Windows power users keep installed
One-click scans. No signup required.
If the Navigation block starts with a Page List, it can automatically show published pages. Convert the list to individual Page Link blocks when you need manual ordering or custom labels. After conversion, newly published pages are not added automatically.
Style a menu in a classic or hybrid theme
Use Appearance > Menus
- Open Appearance > Menus.
- Select the menu and theme location you want to edit.
- Reorder items by dragging them, indent items to create submenus, and expand each item to edit its label or link.
- Click Save Menu, then open the front end to inspect the result.
The available locations and item options are theme-dependent. If Appearance > Menus is missing, the active theme may be a block theme, or a plugin may be changing the dashboard.
Check the Customizer
When supported, open Appearance > Customize and look for menu, header, colors, typography or additional CSS panels. The Customizer provides a live preview and may offer device contexts, but its sections vary by theme. WordPress documents these differences in the Customizer guide.
Add CSS only when the controls are insufficient
Use the theme’s Additional CSS area or the site-wide Additional CSS editor in Styles when a built-in control cannot produce the required result. Inspect the rendered HTML first and target the classes generated by your specific theme. Do not assume that a selector such as .menu exists or behaves the same way everywhere.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →For classic-theme developers, WordPress documents registering menu locations with register_nav_menus() and outputting them with wp_nav_menu(). A container_class can provide a deliberate CSS hook. See the Navigation Menus section of the Theme Handbook. These examples come from classic-theme documentation and should be checked against your project’s current markup and conventions.
Rank #4
Common styling tasks
| Goal | Block theme | Classic or hybrid theme |
|---|---|---|
| Change link color | Select Navigation block > Styles > Colors. | Use theme color controls, then target the theme’s actual link selector in Additional CSS. |
| Change font or text size | Navigation block > Styles > Typography. | Use Customizer typography settings or CSS that matches the menu markup. |
| Change horizontal/vertical layout | Navigation block > Layout; set orientation and justification. | Use the theme’s header/menu options or inspect its flex/grid classes before writing CSS. |
| Adjust item spacing | Navigation block > Dimensions; change padding, margin or block gap. | Use theme spacing controls or theme-specific selectors. |
| Style a mobile menu | Configure overlay visibility in Navigation settings and edit the overlay template. | Use the theme’s mobile-menu options and inspect the collapsed markup at a narrow viewport. |
| Control submenu behavior | Navigation settings include hover/click behavior and arrow display. | Behavior is supplied by the theme or its scripts; check its documentation before overriding it. |
When to use Additional CSS
Start with Styles, because those controls are less fragile and are easier to maintain when the theme’s markup changes. Use CSS for narrowly defined requirements such as a special active-state treatment, a breakpoint-specific adjustment or a design detail the editor does not expose.
- Inspect the front-end element and identify a selector unique to the menu.
- Scope the rule to the relevant header, navigation block or menu location.
- Check focus, hover, open-submenu and keyboard states, not only the default link.
- Preview at both wide and narrow widths before publishing.
CSS entered through Styles is tied to the current theme and is cleared if you switch themes. Keep a copy of important rules if a future redesign is likely.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Save, preview and troubleshoot
The menu looks right in the editor but not on the site
Confirm that you edited the template part used by the page, that the Navigation block is assigned to the intended saved menu, and that you clicked Save. Clear any caching layer and reload the front end after checking those settings.
Recommended Free Tools
Best Value
Appearance > Menus is missing
Check whether the site uses a block theme and open Appearance > Editor instead. A hybrid theme or plugin can also alter which screens are available.
A CSS rule has no effect
Inspect the live HTML, verify that the selector matches the active theme’s classes, and check whether a more specific rule or inline style wins. Avoid copying selectors from another theme without comparing its markup.
The mobile overlay is wrong
In a block theme, edit the Navigation block’s overlay template and test the configured visibility setting. In a classic theme, use the theme’s own mobile-menu controls; its collapsed markup and scripts are not standardized.
New pages do not appear in the menu
If you converted a block-theme Page List into individual Page Link blocks, the menu is now manually managed. Add new links yourself or restore the automatic Page List behavior.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
A practical decision guide
| Approach | Best for | Trade-off |
|---|---|---|
| Navigation block Styles | Block-theme users needing typography, color, layout and spacing changes. | Controls depend on WordPress version and theme support. |
| Global Styles | A consistent navigation design across multiple templates. | Affects every matching block type unless overridden locally. |
| Appearance > Menus and Customizer | Classic-theme users working within the theme’s supplied options. | Available controls and markup differ from theme to theme. |
| Additional CSS | Specific visual adjustments unavailable in the interface. | Requires selector knowledge and maintenance when themes change. |
| Theme development hooks | Developers creating reliable menu locations and markup. | Requires PHP, CSS and testing against the project’s current code. |
Final checks before publishing
- Verify that the active theme matches the workflow you used.
- Check the menu on a wide screen and a narrow screen.
- Open every submenu and test keyboard focus and the mobile toggle.
- Confirm that the active, hover and focus states remain visible against the background.
- Save the template, menu or Customizer changes, then inspect the front end rather than relying only on editor preview.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
