尝试使用香草javascript使我的navbar移动友好

我正在使用JavaScript，这样用户可以单击切换（汉堡），这样导航栏就可以像引导导航栏一样在移动视图中下拉。像这样：

但是，当我的导航栏在移动视图中时，导航栏徽标将消失，但当您单击切换（汉堡）按钮时，它将出现

我的HTML：

<!-- Top navigation -->
<div class="topnav" id="myTopnav">
  <a href="#center"class="active">Navbar Logo</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
  <!-- Centered link -->
  <div class="topnav-centered">
    <a href="#center">center</a>
  </div>

  <!-- Left-aligned links (default) -->
  <a href="#news">News</a>
  <a href="#contact">Contact</a>

  <!-- Right-aligned links -->
  <div class="topnav-right">
    <a href="#search">Search</a>
    <a href="#about">About</a>
  </div>

</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

我的JS：

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

指向我的代码笔的链接是

它是你的CSS隐藏徽标-特别是，这个块

@media screen and (max-width: 600px) {
  .topnav .topnav-centered > a,
  .topnav .topnav-right > a,
  .topnav > a{
    display: none;
    }

  .nav-logo{
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

这条规则：

.topnav > a{
   display: none;
}

您的徽标是

.topnav

中的

，因此在宽度小于

600px

时会被隐藏

您需要更具体地使用CSS规则来修复此问题。

是您的CSS隐藏了徽标-具体来说，就是这个块

@media screen and (max-width: 600px) {
  .topnav .topnav-centered > a,
  .topnav .topnav-right > a,
  .topnav > a{
    display: none;
    }

  .nav-logo{
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

这条规则：

.topnav > a{
   display: none;
}

您的徽标是

.topnav

中的

，因此在宽度小于

600px

时会被隐藏

---

要解决这个问题，您需要更具体地使用CSS规则。

一个与JS无关的快速提示：如果您为myTopnav添加/更改CSS类，它将停止工作。尽量避免这种依赖关系。您的函数可以替换为：

function myFunction（）{var x=document.getElementById（“myTopnav”）；x.classList.toggle（'responsive'）；}

一个与JS无关的快速提示：如果您为myTopnav添加/更改css类，它将停止工作。尽量避免这种依赖关系。您的函数可以替换为：

function myFunction（）{var x=document.getElementById（“myTopnav”）；x.classList.toggle（'responsive'）；}