To make one WordPress navigation item stand out, give that item its own CSS class and style the class. The exact place where you add the class depends on whether the site uses a block theme’s Navigation block or the classic Appearance > Menus screen. For a simple text or background-color change, the Navigation block’s built-in color controls may be all you need.
Choose the method that matches your theme
WordPress sites generally use one of two navigation workflows. Block themes (the modern site-editor approach) edit navigation with the Navigation block; classic and hybrid themes may still provide the Appearance Menus screen. WordPress 6.0 and later block themes manage navigation through the Navigation block, although the exact controls can vary by theme.
| Site setup | Where to add the class | Where to add CSS | Best first option |
|---|---|---|---|
| Block theme | Site Editor, Navigation block, selected Navigation Link, Advanced > Additional CSS Class(es) | Styles interface’s Additional CSS editor, or the theme’s available CSS area | Try Navigation block color controls before writing CSS |
| Classic or hybrid theme | Appearance > Menus, menu item’s CSS Classes field | The CSS editor supplied by the active theme or site | Add a class to only the chosen menu item, then style it |
Do not use a selector such as .wp-block-navigation a when only one link should change; that would affect every matching link. A distinctive class gives the treatment a precise target.
Highlight one item in a block theme
1. Select the individual navigation link
- Open the WordPress Site Editor and select the Navigation block.
- Open List View so the links inside the navigation are visible.
- Select the specific Navigation Link you want to emphasize.
- In the settings sidebar, expand Advanced and enter a class such as
featured-menu-linkin Additional CSS Class(es). Use a name that describes the purpose and does not contain spaces.
The Navigation block documents these structural classes: .wp-block-navigation-item for each item, .wp-block-navigation-item__content for its link, and .wp-block-navigation-item__label for the inner label container. A class assigned to the chosen item is normally a clearer hook than styling one of those structural classes globally. See the Navigation block reference.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitches#1 Best Overall
2. Try the built-in color controls
If the desired effect is only a different text color, background color, or submenu color, use the Navigation block’s color settings. This avoids a custom rule and is less sensitive to theme markup. The Navigation block documentation describes the available controls.
3. Add a targeted CSS rule when needed
For a button-like treatment, spacing, a border, or another design not exposed by the block controls, add CSS through the Styles interface. WordPress describes a site-wide Additional CSS editor in Styles; it also provides Styles > Blocks for Additional block CSS. Be careful with the latter: CSS entered for a block type applies to that block type site-wide, not just to one occurrence. Details are in the Styles overview.
.wp-block-navigation .featured-menu-link > a {
background-color: #f2c94c;
border-radius: 0.25rem;
padding: 0.5rem 0.75rem;
}This is a starting example, not a guarantee of the markup on every theme. The class may be attached to a different element, or the link may not be a direct child of the element matched above. If nothing changes, inspect the rendered navigation in your browser’s developer tools and adjust the selector to the element that actually carries featured-menu-link. If the site has more than one navigation, include a selector for the intended navigation so the style cannot leak into another menu.
Highlight one item in a classic or hybrid theme
1. Expose the CSS Classes field
- Go to Appearance > Menus.
- Expand the menu item you want to style.
- Enter a distinctive value, for example
featured-menu-link, in CSS Classes. - Save the menu.
If CSS Classes is not visible, open Screen Options (or the screen’s advanced options) at the top of the Menus screen and enable it. WordPress documents this workflow in the Appearance Menus screen reference.
Rank #3
2. Style the class in the site’s CSS editor
Add a rule using the class name. Classic menu markup commonly places the custom class on the menu item’s <li>, so a selector such as the following often works:
.featured-menu-link > a {
background-color: #f2c94c;
border-radius: 0.25rem;
padding: 0.5rem 0.75rem;
}The available CSS location depends on the active theme and setup. If the rule has no effect, inspect the page to confirm whether the class is on the list item, link, or another wrapper, then target that element. Also check whether the theme’s more-specific rules or link states (:hover, :focus, and :active) override your declaration.
Rank #4
Developer option: add a class conditionally
For a classic theme customization that must add a class based on menu-item data rather than an editor-entered value, WordPress exposes the nav_menu_css_class filter. It filters the classes applied to a menu item’s <li>. Use this approach in theme or plugin code when the condition is dynamic; for a one-off visual change, the menu editor’s CSS Classes field is simpler.
The wp_nav_menu() reference describes the generated menu markup and classes, while the nav_menu_css_class hook reference documents the filter.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteBest Value
When “highlight” means the current page
A persistent call-to-action style and a current-page indicator are different requirements. Classic WordPress menus add generated classes for the current item and current ancestors. Before creating a manual class, inspect the page output and your theme’s markup, then target the generated state class your theme actually uses. The documented menu classes and hooks are covered in the wp_nav_menu() documentation; selectors still need to be verified against the theme’s rendered HTML.
Quick Recap
Troubleshoot a highlight that does not appear
- Wrong editor: Confirm whether the site is using the Site Editor’s Navigation block or Appearance > Menus. The fields and markup are different.
- Class was not saved: Reopen the item and verify the class spelling, including hyphens and capitalization.
- Selector targets the wrong element: Inspect the rendered HTML to see where the custom class is attached, then change the selector accordingly.
- Another rule wins: Compare specificity and check the theme’s normal, hover, focus, and active declarations. Keep the rule scoped to the intended navigation rather than adding broad selectors.
- Styles are cached: Clear any page, browser, or optimization cache after saving CSS.
- Per-block CSS changed too much: CSS under Styles > Blocks applies to that block type site-wide. Move a one-item rule to site-wide Additional CSS and retain the unique item class.
Useful official references
- Navigation block – Block Editor Handbook
- Navigation block documentation
- Appearance Menus Screen documentation
- Styles overview
- Navigation Menus – Theme Handbook
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.
