移动端导航栏在生产环境不显示问题求助

Hey there, I see you're stuck with a mobile nav that's hiding in production even though you can spot it in DevTools. Let's break down the possible issues and fixes based on your code:

1. Fix Broken HTML Structure #

Looking at your HTML, there's a misaligned closing tag that's likely throwing off the DOM structure:

You have an extra </div> inside the <nav> element before closing the <nav> itself. This can cause unexpected rendering behavior and prevent JavaScript from targeting elements correctly. Also, there's a duplicate class attribute on the .logo-side anchor which will break AngularJS's ng-class functionality.

Correct the structure to:

<span class="header-nav">
<header ng-controller="Headerng-controller" mouseleave="hideHoverMenu()" class="scope" id="headerRoot">
  <div class="top">
    <a href="#" class="visible-xs visible-sm hamburger-menu-btn" ng-click="toggleMobileNav(scroll); $event.preventDefault(); $event.stopPropagation()"></a>
    <a href="index" class="logo logo-main bg-contain" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Main Logo"><h1>Galaxy Games</h1></a>
    <a href="index" class="logo logo-side bg-contain d_1x1" ng-class="{white: $root.showSearch}" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Side Logo"><h1>Galaxy Games</h1></a>
    <nav role="navigation" aria-labelledby="main-nav" class="hidden-xxs hidden-xs hidden-sm">
      <!-- Nav links here -->
    </nav>
  </div> <!-- Close .top div here, after the nav -->
</header>
</span>

2. Verify Mobile Nav Toggle Logic #

Your #siteMobileNav is hidden by default with transform: matrix(1,0,0,1,-270,0) (shifted left 270px). It only becomes visible when a parent element has the .mobile-nav-shown class.

• Check if your toggleMobileNav AngularJS function is actually adding/removing the .mobile-nav-shown class to the correct parent (like <body> or a wrapper). A working implementation might look like:

$scope.toggleMobileNav = function(scroll) {
  angular.element(document.body).toggleClass('mobile-nav-shown');
  // Add any scroll-related logic here
};

• Test manually: In DevTools, add the .mobile-nav-shown class to <body> and see if the nav slides into view. If it does, the issue is with the toggle function not firing correctly.

3. Fix Hamburger Button Visibility for Tablets #

Your CSS only makes .visible-xs (≤767px) display block, but the hamburger button has visible-sm too (768-991px). Add this media query to ensure it shows on tablets:

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block!important;
  }
}

4. Check for Production-Specific CSS Overrides #

Sometimes production builds minify or override styles accidentally:

• In DevTools, inspect #siteMobileNav and check the Computed tab to see if transform is being overwritten, or if display/opacity are set to hidden values.
• Ensure the hamburger button's background image path (../img/global/mobile-nav-sprite.png) is correct in production—if the path is wrong, the button might be invisible even though the element exists.

5. Confirm Z-Index Doesn't Cause Overlap #

While your nav is shifted off-screen by default, when it's visible, check that its z-index (10) isn't being covered by higher z-index elements like the header's .top (z-index 50). You can bump up the nav's z-index temporarily to test:

.mobile-nav-shown #siteMobileNav {
  z-index: 100; /* Higher than header elements */
}

Try these steps one by one—fixing the HTML structure and verifying the toggle function are the most likely quick wins here!

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