BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty twenty

How to Change Menu Colors in the Twenty Twenty Theme with Custom CSS

38 threads Sep 10, 2025 Theme → Twenty twenty

Content

One of the most common customization requests for the Twenty Twenty theme is changing the default red accent color used in the main navigation menu. While the theme's built-in Customizer offers some color options, many users find they need more granular control, especially for sub-menus, mobile views, and specific elements like dropdown arrows.

Why You Need Custom CSS

The Twenty Twenty theme uses a specific set of CSS selectors to style its navigation elements. The default color options in the Customizer (Appearance > Customize > Colors) are limited and do not always cover all parts of the menu, particularly on mobile devices or within complex dropdown structures. This is why adding your own CSS code is often the most effective and permanent solution.

Common Solutions and CSS Code Snippets

1. Changing Main Menu Link Color

To change the color of the top-level menu items (e.g., from red to black), add the following CSS to Appearance > Customize > Additional CSS:

body:not(.overlay-header) .primary-menu > li > a {
    color: #000000 !important;
}

2. Changing Dropdown Menu Arrow Color

The small arrow next to menu items that have submenus can be styled separately:

.primary-menu > li > .icon {
    color: #000000 !important;
}

3. Styling the Dropdown Submenu Background

To change the background color of the dropdown submenu itself:

body:not(.overlay-header) .primary-menu ul {
    background-color: #139576;
}

4. Styling the Submenu Arrow (The Pointer)

The small triangular pointer that connects the dropdown to the main menu requires a different selector:

body:not(.overlay-header) .primary-menu > li > ul::after {
    border-bottom-color: #139576;
}

5. Changing Mobile Menu Toggle Icons

On tablet and mobile views, the 'menu' text and the three-dot icon can be styled with this code:

.header-toggles .toggle {
    color: #ff9500 !important;
}

Important Notes and Troubleshooting

  • Use !important Sparingly: The !important rule is used in these examples to override the theme's default styles. While effective, it should be used carefully to avoid future styling conflicts.
  • Check Your Theme: As seen in the sample threads, users sometimes mistake issues with other themes (like Astra) for Twenty Twenty problems. Always confirm you are using the correct theme.
  • Browser Developer Tools are Your Friend: The most reliable way to find the correct CSS selector for an element is to use your browser's inspect tool. Right-click the element you want to change and select 'Inspect' to see its classes and IDs.

By using these targeted CSS snippets, you can gain full control over your Twenty Twenty theme's menu appearance without needing to edit theme files directly.

Related Support Threads Support