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

How to Fix Common Color and Style Issues in the Twenty Twenty-Four Theme

37 threads Sep 16, 2025 Theme → Twenty twenty-four

Content

Many users of the Twenty Twenty-Four theme encounter challenges when trying to customize colors and styles for specific elements like navigation links, buttons, and backgrounds. These issues often arise from the theme's global style system and the specific ways CSS is applied. This guide explains the most common problems and provides clear, tested solutions.

Common Color and Style Customization Issues

Based on community reports, here are the frequent hurdles users face:

  • Navigation link underlines and hover colors not changing as expected.
  • Custom CSS being overridden or wiped out after changing global styles.
  • Difficulty applying unique styles to individual elements like buttons or the site title.
  • Inconsistent colors between desktop and mobile views.
  • Styles applying globally when they are meant for a single element.

Solutions and Workarounds

1. Removing or Customizing the Navigation Underline

A common request is to remove the default underline from links or change its color. The default theme styles can be strong, but they can be overridden with more specific CSS.

To remove the default underline:

:root :where(a:where(:not(.wp-element-button))) {
    text-decoration: none;
}

To change the navigation underline color on hover:

.wp-block-navigation .wp-block-navigation-item a:hover {
    color: #6947F3;
    text-decoration: underline;
}

2. Changing Button Styles and Removing Focus Dots

Buttons can have a focus indicator (often appearing as "dots" or an outline) when clicked. To remove this and create a custom hover effect, use the following CSS:

Remove focus outline:

.wp-element-button:focus, .wp-block-button__link:focus {
    outline-style: none;
}

Create a custom button hover effect:

a.wp-block-button__link:hover, a.wp-block-button__link:active {
    background-color: white;
    color: black;
}

3. Preventing Custom CSS from Being Overwritten

Some users have reported that modifying global theme colors after adding custom CSS can cause their customizations to disappear. This is a known issue being tracked in the Gutenberg project on GitHub. As a best practice, always add your final custom CSS after you have finalized your global color selections in the Styles panel.

4. Styling Individual Elements Without Affecting Others

The Twenty Twenty-Four theme uses a global style system. To change the color of a single element, like one character in the site title or a specific button, you often need to use precise CSS selectors. Inspect the element using your browser's developer tools to find its unique class, then target that class in your custom CSS.

5. Ensuring Mobile and Desktop Consistency

If colors appear differently on mobile devices, it's often due to CSS that isn't responsive. Use your browser's device emulation tool in its developer tools to test and add mobile-specific CSS rules if necessary using media queries.

Where to Add Custom CSS

Always add custom CSS through the official WordPress Customizer to ensure it is saved correctly and not overwritten by theme updates. Navigate to Appearance → Customize → Additional CSS and paste your code there.

By understanding how the Twenty Twenty-Four theme's styling system works and using targeted CSS, you can achieve the custom look you want while avoiding common pitfalls.

Related Support Threads Support