Back to Community
Home / Community / Theme → Woostify

How to Fix Mobile Header and Menu Color Issues in Woostify

12 threads Sep 9, 2025 Theme → Woostify

Content

Many Woostify theme users encounter a common challenge: customizing the colors for their mobile header and menu. This often manifests as text or icons that are invisible against the background, or an inability to apply different colors for desktop and mobile views. This guide will explain why this happens and provide the most effective solutions.

Why This Problem Occurs

The Woostify theme provides extensive customization options through the WordPress Customizer. However, mobile-specific styling is often not as granular as desktop controls. When users apply a global color change (e.g., making all header text white for a transparent desktop header), it can inadvertently make the mobile menu text white on a white background, rendering it invisible. The theme's CSS is also structured with specific selectors, so generic CSS rules may not have enough specificity to override the default styles.

Common Solutions

Solution 1: Use Targeted Custom CSS (Most Common Fix)

The most reliable method is to add custom CSS that specifically targets the mobile menu elements. This approach gives you precise control. Based on community solutions, the following CSS snippets are highly effective.

To change the mobile menu background color:
This CSS targets the entire sidebar menu on mobile devices to ensure a consistent color.

.sidebar-menu {
    background-color: #0F2B5B !important;
}

To change mobile menu link or icon color:
If your text or SVG icons are not visible, use this CSS to change their color. The code targets the filter button mentioned in the threads, but you can adapt the selector.

#toggle-sidebar-mobile-button,
#toggle-sidebar-mobile-button .woostify-svg-icon path {
    color: #0C293D !important;
    fill: #0C293D !important;
}

To apply different colors for desktop and mobile:
Use CSS media queries to apply styles only on certain screen sizes. The following example makes menu items white on desktop but black on mobile.

/* Default/Desktop style */
.primary-navigation .menu-item a {
    color: #ffffff;
}

@media (max-width: 768px) {
    /* Mobile-specific style */
    .primary-navigation .menu-item a {
        color: #000000 !important;
    }
}

How to add this CSS:

  1. Navigate to Appearance > Customize in your WordPress dashboard.
  2. Go to the Additional CSS section.
  3. Paste your code into the provided box.
  4. Publish your changes.

Solution 2: Double-Check the Customizer Settings

Before adding custom code, ensure you have explored all relevant theme options. For header colors, thoroughly check these Customizer panels:

  • Layout > Header: For main header settings.
  • Layout > Topbar: For the top bar's design and color options.
  • Layout > Mobile Header: For settings that might specifically affect mobile view.

Sometimes, a color option in a sub-section might control the element you are trying to change.

Important Notes

  • Always use the !important declaration in your CSS to ensure it overrides any existing theme styles, as shown in the examples above.
  • For SVG icons, you often need to target the fill property instead of (or in addition to) the color property.
  • If your site is not live, providing a URL for help is difficult. Consider using a temporary staging site or a screenshot-sharing service like Snipboard.io to share visual examples of the problem.

By using these targeted CSS solutions, you can successfully resolve most mobile header and menu color visibility issues in the Woostify theme.

Related Support Threads Support