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

How to Customize Link and Navigation Styling in Twenty Twenty-One

31 threads Sep 9, 2025 Theme → Twenty twenty-one

Content

Many users of the Twenty Twenty-One theme encounter a common issue: unwanted styling on links, particularly a black background that appears when a link is clicked or focused. This behavior is a core part of the theme's accessibility features, designed to provide a clear visual indicator for keyboard navigation. However, it often clashes with custom site designs.

Based on community discussions, this styling is controlled by specific CSS selectors that target the :focus state of links. The good news is that this default behavior can be modified or completely removed using custom CSS.

Common Solutions for Customizing Link Styles

The most effective method for overriding the default link styles is to use the 'Additional CSS' feature in the WordPress Customizer. The following code snippets address the most frequently reported issues.

1. Remove or Change the Click/Focus Background

To completely remove the black background that appears on click (the :active state) and focus, use this CSS:

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__link),
.site a:active:not(.wp-block-button__link):not(.wp-block-file__link) {
    background-color: transparent !important;
}

2. Remove the Dotted Outline on Focus

To remove the dotted text decoration that appears on focus, add this rule:

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__link) {
    text-decoration: none !important;
}

3. Change the Focus Styling to Custom Colors

If you prefer to keep the accessibility features but change the colors, you can modify the properties. The following example changes the background to blue and the text to red on focus:

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__link) {
    background-color: blue !important;
    color: red !important;
}

Targeting Specific Areas

You can make your CSS more specific by targeting links in certain parts of your site. For instance, to only remove focus styles from the footer widget area, you would use:

.widget-area a:focus {
    background-color: transparent !important;
    text-decoration: none !important;
}

Similarly, to target a specific navigation menu item by its ID (which can be found by inspecting the element in your browser), use a selector like this:

#menu-item-34529 a:focus {
    /* Your custom styles here */
}

Important Considerations

  • Accessibility: Completely removing focus styles can make your site difficult to navigate for users who rely on keyboards. Consider replacing the default styles with a more subtle but still visible alternative, like a border or outline.
  • Specificity: The Twenty Twenty-One theme's styles are well-defined. Using !important is often necessary to override them, as shown in the examples above.
  • Testing: Always test changes on different browsers and devices to ensure the desired effect is achieved without breaking other elements.

By using these CSS snippets in the 'Additional CSS' section, you can gain full control over how links appear on your site, ensuring they match your design while maintaining the functionality of the Twenty Twenty-One theme.

Related Support Threads Support