Back to Community
Home / Community / Theme → Twenty twenty-two

How to Style and Customize Your Twenty Twenty-Two Navigation Menu

18 threads Sep 16, 2025 Theme → Twenty twenty-two

Content

Customizing the navigation menu in the Twenty Twenty-Two theme is a common request. Users often want to change colors, highlight active items, adjust layouts for mobile, and more. While the Site Editor offers many styling options, some specific customizations require adding custom CSS. This guide covers the most frequent navigation menu styling challenges and their solutions.

Common Navigation Menu Customization Requests

Based on community discussions, here are the most frequent types of styling changes users want to make:

  • Changing the color of the active menu item or its parent.
  • Modifying the background or text color of sub-menus.
  • Adjusting the hover state appearance of menu items.
  • Changing the layout or position of the mobile menu.
  • Removing the default focus outline (blue box) for accessibility.
  • Removing or altering link underlines.

How to Change the Active Menu Item Color

A frequently asked question is how to change the color of the navigation link for the page a visitor is currently viewing. This is not directly configurable in the Site Editor and requires custom CSS. The following code is a common solution that targets the active menu item:

.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
  color: #365ABA !important;
}

Note: For some users, this selector may not be specific enough, especially if trying to style parent items of active sub-menus. A more specific selector that often works is:

.wp-block-navigation-item.current-menu-item.wp-block-navigation-link a {
  color: #f6f6f6 !important;
  background-color: #c27113 !important;
}

You can add this code in the Additional CSS section of the WordPress Customizer (Appearance → Customize) or using a plugin like Jetpack.

How to Style Sub-Menus and Mobile Menus

Many users report issues with sub-menu colors, particularly when text and background colors are the same (e.g., white text on a white background), making sub-menus invisible.

To change the sub-menu background color, you need to target the responsive container. The following CSS can change the background of the mobile menu overlay:

.wp-block-navigation__responsive-container.is-menu-open {
  background-color: rgba(227, 235, 244,.9) !important;
}

To target the background of desktop sub-menus, you may need to inspect your specific page using a browser's developer tools to find the correct class, as the structure can vary.

How to Customize Hover States and Focus Outlines

To change the background color of a menu item on hover and make it fill the space, you can use CSS like this:

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
  background-color: #c27113;
  color: #f6f6f6;
}

If you wish to remove the default blue focus outline that appears for accessibility, you can use the following code. Important: Removing focus styles can make your site harder to use for keyboard users, so consider replacing them with a different visible style.

.wp-block-navigation *:focus {
  outline: none !important;
}

How to Remove Link Underlines

The Twenty Twenty-Two theme has its own default underline style for links. To remove the underline from navigation links and have it appear only on hover, you can use this CSS:

.wp-block-navigation a {
  text-decoration: none;
}
.wp-block-navigation a:hover {
  text-decoration: underline;
}

Important Considerations

  • CSS Specificity: If your CSS isn't working, the theme's built-in styles might be overriding it. Using the !important declaration or writing a more specific CSS selector can often solve this.
  • Use the Customizer: Always add custom CSS through the WordPress Customizer (Appearance → Customize → Additional CSS) or a dedicated CSS plugin. This is the safest method and prevents code from being lost during theme updates.
  • Browser Inspector: For highly specific changes, use your browser's developer tools (right-click on an element and select 'Inspect') to identify the exact CSS classes you need to target.

By using these CSS snippets, you can achieve a high degree of customization for your Twenty Twenty-Two navigation menu beyond the standard Site Editor options.

Related Support Threads Support