Back to Community
Home / Community / Theme → Go

How to Fix Go Theme Menu Color and Styling Issues

28 threads Sep 10, 2025 Theme → Go

Content

Many users of the Go theme encounter issues with menu colors, transparency, and styling. These problems can range from menu text becoming invisible against backgrounds to unwanted hover effects and mobile menu display glitches. Based on community discussions and solutions, this guide compiles the most effective fixes for common Go theme menu problems.

Common Menu Issues and Their Solutions

1. Changing Menu Text and Icon Colors

The most frequent issue is the inability to change menu text or SVG icon colors through the standard customizer. This often happens after theme or plugin updates.

Solution: Add custom CSS to Appearance > Customize > Additional CSS.

/* Change menu text color */
#header__navigation {
    color: #yourcolor !important;
}

/* Change menu toggle icon color */
.nav-toggle-icon svg {
    fill: #yourcolor !important;
}

/* Change submenu dropdown arrow color */
#header__navigation svg {
    color: #yourcolor !important;
}

2. Fixing Mobile Menu Background Transparency

On mobile devices, the menu background might become transparent, making text unreadable.

Solution: Target mobile screens specifically with CSS.

@media (max-width: 768px) {
    #menu-primary-menu { 
        background: #ffffff !important;
    }
}

3. Modifying Submenu Background Colors

Submenus under navigation items might not inherit the main menu's styling.

Solution: Target the submenu class directly.

.primary-menu .sub-menu {
    background-color: #yourcolor !important;
}

4. Removing or Customizing Hover Effects

Some users want to remove the default color change effect when hovering over menu items.

Solution: Override the hover styles (use cautiously as this affects all site elements).

/* Remove hover effects globally */
*:hover {
    color: inherit !important;
    background-color: inherit !important;
}

5. Header Background Transparency

Creating a semi-transparent header background while keeping menu items opaque requires specific targeting.

Solution: Apply opacity only to the header background element, not the entire header container.

.header-background {
    opacity: 0.5; /* Adjust as needed */
}

Why These Issues Occur

These styling challenges typically arise because:

  • The theme's default CSS has strong specificity
  • Plugin updates (particularly CoBlocks) may override theme styles
  • Mobile and desktop menus often use different CSS classes
  • Theme updates may change class names or styling approaches

Best Practices

  • Always use the !important declaration in your custom CSS to override theme styles
  • Test changes on both mobile and desktop views
  • Create a child theme before making extensive modifications
  • Clear your cache after implementing CSS changes

These solutions have helped numerous Go theme users resolve their menu styling issues. For persistent problems, checking for plugin conflicts or seeking additional community support may be necessary.

Related Support Threads Support