导航栏不起作用答案

【问题标题】：Navbar does not work导航栏不起作用
【发布时间】：2019-01-15 21:12:51
【问题描述】：

我不知道为什么我的导航栏无法在移动设备上运行，所以我正在寻求帮助。问题是切换按钮不显示。

<html>
Navbar (sit on top) 
<div class="w3-top">
  <div class="w3-bar w3-white w3-card" id="myNavbar">
    <a href="#home" class="w3-bar-item w3-button w3-wide">Start</a>
     Right-sided navbar links 
    <div class="w3-right w3-hide-small">
      <a href="#about" class="w3-bar-item w3-button">Field 1</a>
      <a href="#team" class="w3-bar-item w3-button"><i class="fa fa-user"></i> Field 2</a>
      <a href="#work" class="w3-bar-item w3-button"><i class="fa fa-th"></i> Field 3</a>
      <a href="#pricing" class="w3-bar-item w3-button"><i class="fa fa-usd"></i> Field 4</a>
      <a href="#contact" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i> Field 5</a>
    </div>
     Hide right-floated links on small screens and replace them with a menu icon 

    <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
</div>

 Sidebar on small screens when clicking the menu icon 
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">X</a>
  <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">Field 1</a>
  <a href="#team" onclick="w3_close()" class="w3-bar-item w3-button">Field 2</a>
  <a href="#work" onclick="w3_close()" class="w3-bar-item w3-button">Field 3</a>
  <a href="#pricing" onclick="w3_close()" class="w3-bar-item w3-button">Field 4</a>
   <a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button">Field 5</a> 
</nav>

它基于 w3schools 模板，所以我当然导入了所有内容。

CSS 文件：

使用的JS：

https://pastebin.com/sJQXxXLg

非常感谢！

【问题讨论】：

您还需要向我们展示您使用的任何 CSS / JS，如果您只提供了一半的信息，很难找到错误
欢迎来到stackoverflow！你说“行不通”（这里用这句话就会树敌），什么行不通？它在应该改变的地方保持不变吗？它会消失吗？你看到了什么？请详细解释您的问题。谢谢:)
大家好，抱歉我的错误信息：D w3schools.com/w3css/4/w3.css cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/… cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/… 我的问题是应该在移动设备上显示侧边栏的切换按钮不显示侧边栏。 js:pastebin.com/sJQXxXLg
您能否将您的 HTML（和 CSS/JavaScript/其他）作为编辑添加到您的帖子而不是 cmets 中？另外请添加一个 JsFiddle 或类似的东西，以便我们可以看到您的代码正在运行。
如果您打开控制台（在 chrome 和 firefox 中为 ctrl + shift + i），是否会出现找不到文件的错误（404）？

标签： html css mobile navbar

【解决方案1】：

在您的代码中删除 style="display:none" 并使用引导程序，您可以拥有像这样的导航栏：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large"  id="mySidebar">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">X</a>
  <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">Field 1</a>
....
</nav>

【讨论】：