CSS本地正常服务器异常：移动端导航栏手机号显示异常

Hey there, let's get that phone number staying visible no matter the menu state! Based on your description, here's what's likely going wrong and how to fix it:

Why This Happens #

Chances are, your menu toggle script is adding/removing a parent class that's hiding the phone number when the menu closes (like setting display: none or opacity: 0). The local vs production discrepancy is probably due to cached CSS in production, or a small code change that didn't get deployed correctly.

Quick Fixes to Try #

1. Override Visibility with CSS #

Since the phone number uses fixed positioning, we can hardcode its visibility to stay on screen. Update your mobile media query with these styles:

@media only screen and (max-width: 767px) {
  .cmd-nav .phone-no {
    position: fixed !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important; /* Ensures it sits above other menu elements */
    /* Keep your existing top/right/bottom/left positioning here */
  }
}

The !important declarations will override any inline styles or parent class changes that might be hiding it when the menu closes.

2. Check Your Menu Toggle JS #

If the CSS fix doesn't work, dig into the JavaScript that handles your menu toggle. Look for lines that might be targeting the phone number element to hide it when the menu closes. For example:

// Problematic code to look for
document.querySelector('.cmd-nav .phone-no').style.display = 'none';

Delete or modify that line so it doesn't affect the phone number's visibility when the menu is closed.

3. Bust Production Cache #

Since the issue isn't showing up locally, your production site is probably serving cached old CSS. To fix this:

• Clear your server's cache (if using a CDN or hosting with caching)
• Add a version parameter to your CSS file URL (e.g., styles.css?v=1.1) to force browsers to load the updated styles

How to Verify #

After applying the fix:

• Pull up your site's mobile view
• Toggle the menu open and closed a few times
• Confirm the phone number stays in its fixed position and remains visible the whole time

内容的提问来源于stack exchange，提问作者ewizard