响应式顶部导航菜单：非首页小屏无法显示hamburger菜单问题

问题描述 #

采用W3Schools的响应式顶部导航菜单，缩小浏览器窗口至小屏状态时，仅首页的汉堡菜单可正常显示并工作，其余四个页面均无法显示该菜单。

用到的代码 #

HTML代码 #

<div class="topnav" id="myTopnav">
         <a href="index.html" class="active" title="Applied Ecosystem
                                                    Services, LLC | Providing essential
                                                    environmental services">Home</a>
         <a href="testimonials.html" class="active" title="Client Testimonials">Why
           Clients Retain Me</a>
         <a href="capabilities.html" class="active" title="Providing essential environmental
                                            services">Capabilities</a>
         <a href="library.html" class="active" title="Environmental Regulatory Science
                                       Resource Library">Documents</a>
         <a href="contact.html" class="active" title="Contacting The Environmental Issues
                                       Doctor">Contact me</a>
         <a href="javascript:void(0);" class="icon" onclick="myFunction()">
           <i class="fa fa-bars"></i>
         </a>
      </div>

CSS代码 #

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  /*  background-color: #008B8B */
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for
   the first one ("Home"). Show the link that contains should open and close
   the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user
   clicks on the icon. This class makes the topnav look good on small screens
   (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
  }
}

JavaScript代码 #

/* Toggle between adding and removing the "responsive" class to topnav when
 * the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

问题诱因及解决方案 #

1. CSS/JavaScript文件路径错误（最可能原因） #

如果首页和其他页面不在同一目录层级，使用相对路径引入CSS或JS文件时会加载失败：

• 比如首页在根目录，其他页面在子文件夹中，若仍用href="style.css"引入CSS，会在子文件夹下查找该文件，导致CSS未加载，媒体查询规则不生效，汉堡按钮保持默认的display: none状态。
• 解决：使用绝对路径（如href="/css/style.css"）或修正相对路径（子页面用../css/style.css），确保所有页面都能正确加载CSS和JS文件。

2. 所有导航链接错误添加active类 #

当前所有<a>标签都加了active类，不符合导航高亮的逻辑，虽不是汉堡菜单不显示的直接原因，但会导致样式优先级混乱：

• 解决：每个页面仅给当前页的导航链接添加active类，其余链接去掉该类。比如testimonials.html中，仅保留"Why Clients Retain Me"链接的active类，Home等其他链接的active需删除。

3. Font Awesome未正确加载 #

汉堡按钮的图标依赖Font Awesome，若其他页面未引入该库，会导致图标不显示（但按钮本身应仍存在）：

• 解决：在所有页面的<head>中添加Font Awesome的引入代码，确保图标正常显示。

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