请求移动端禁用主导航菜单的CSS代码及主题冲突排查

Got it, let's work through this problem together. You're trying to disable the mobile version of your primary navigation (#menu-primary-menu.mobile-navigation) but hitting two roadblocks: a theme conflict that's overriding your CSS, and no trace of the menu-primary-menu code in functions.php to remove the mobile-navigation class directly. Here are actionable solutions to get this sorted:

1. Force-Hide with High-Priority CSS #

Theme conflicts often happen because the theme's CSS has higher specificity than yours. Use these targeted styles to override it:

/* Option 1: Hide the mobile menu entirely across all screen sizes */
#menu-primary-menu.mobile-navigation {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Option 2: Hide only on mobile screens (adjust the max-width to match your theme's breakpoint) */
@media (max-width: 768px) {
    body #menu-primary-menu.mobile-navigation {
        display: none !important;
    }
}

• The !important flag helps punch through theme styles that might be overriding your rules.
• Adding body to the selector increases specificity, which can also beat theme styles without relying on !important if you prefer.

2. Use JavaScript to Remove the Class or Hide the Menu #

If the theme is dynamically adding the mobile-navigation class after page load (common in modern themes), CSS alone might not cut it. Add this script to your site:

// Wait for the page to fully load before modifying the menu
document.addEventListener('DOMContentLoaded', function() {
    const primaryNav = document.getElementById('menu-primary-menu');
    if (primaryNav) {
        // Option 1: Remove the mobile class so theme styles don't apply
        primaryNav.classList.remove('mobile-navigation');
        
        // Option 2: Directly hide the menu if removing the class isn't enough
        // primaryNav.style.display = 'none';
    }
});

You can add this code via:

• Your theme's "Custom JavaScript" section (usually in Appearance > Customize > Additional JS)
• A lightweight plugin like Custom CSS & JS if your theme doesn't have this option

3. Check Your Theme's Customizer First (Quick Win!) #

Before diving into code, double-check your theme's settings. Many themes include a toggle for mobile navigation in Appearance > Customize. Look for options like:

• "Enable Mobile Menu"
• "Responsive Navigation"
• "Mobile Menu Toggle"
  Turning this off might disable the mobile menu without any code needed.

4. Modify the Menu Template in a Child Theme #

If the menu-primary-menu code isn't in functions.php, it's probably hardcoded in a template file like header.php. To avoid losing changes when your theme updates, use a child theme:

1. Create a child theme if you don't already have one (most themes have official docs for this)
2. Copy the header.php file from your parent theme to your child theme
3. Open the child theme's header.php and look for the wp_nav_menu() function that generates your primary menu. It might look like this:

   wp_nav_menu( array(
       'theme_location' => 'primary',
       'menu_id'        => 'menu-primary-menu',
       'menu_class'     => 'main-nav mobile-navigation',
   ) );
   

4. Remove the mobile-navigation class from the menu_class parameter:

   wp_nav_menu( array(
       'theme_location' => 'primary',
       'menu_id'        => 'menu-primary-menu',
       'menu_class'     => 'main-nav',
   ) );
   

5. Save the file, and your menu will no longer have the mobile class triggering theme styles.

Start with the CSS method first—it's the simplest. If that doesn't work, try the JavaScript or customizer check. The child theme template modification is the most permanent solution if you want to fully remove the mobile class long-term.

内容的提问来源于stack exchange，提问作者Blue Coral Swimwear