我的图标没有显示，我的响应式菜单也没有显示

Question

当我减少 @media {} 图标显示，但是当我用 {} 完全覆盖时，图标不显示。而且我的响应式菜单也没有显示。

`@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}




nav {
background-color: orange;
height: 80px;
}

nav ul{
float: left;
 margin-left: 10px;
}

nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 15px;
}
nav ul li a {
position: relative;
color:white;
font-size: 18px;
text-transform:uppercase;
padding: 5px 0;
}
nav ul li a:before {
position:absolute;
content: '';
left: 0;
height: 3px;
width: 100%;
bottom: 0;
transform:scaleX(0);
transform-origin: right;
background-color: white;
transition: transform .4s linear;
}
nav ul li a:hover:before{
transform: scaleX(1);
transform-origin: right;
}
label #btn,
label #cancel {
color: white;
font-size: 30px;
float: left;
line-height: 80px;
margin-left: 20px;
cursor:pointer;
display:none;
}
#check {
display:none;
}
@media (max-width: 980px) {
ul {
position:fixed;
height: 100vh;
width: 70%;
background-color: orange;
text-align:left;
top: 80px;
left:-100%;
transition: all .4s;

li {
position:relative;
left: 65px;
}
nav ul li {
display:block;
margin:50px 0;
line-height: 30px;
}
label #btn {
display: block;
}
 nav ul li a {
 font-size: 16px;
 }
}

#check:checked ~ ul {
 left:0;
}
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />


  <nav>
  <input type="checkbox" id="check">
  <label class="check" >
     <i class="fa fa-bars" id="btn" ></i>
     <i class="fa fa-times" id="cancel" ></i>
     </label>
      <ul>
          <li><a href="#" >Home</a></li>
          <li><a href="#" >Forums</a></li>
          <li><a href="#" >Store</a></li>
          <li><a href="#" >Vote</a></li>
          <li><a href="#" >Contact us</a></li>
      </ul>
  </nav>

我想要点击图标时显示菜单，但现在甚至显示图标字体。而且在更大的屏幕上，比如桌面，文本应该显示而图标不应该显示。但是现在它也没有显示。

Answer 1

嘿，我注意到一个错误是您在 ul 之后缺少右括号，这就是您的图标未显示的原因。此外，您需要一个 onClick 来将导航栏显示为汉堡菜单。

只需检查一下，一旦您放置结束标记，它就会再次显示该图标。

编辑：

您可以像这样使导航栏响应：

HTML:

<html lang="en">
 
</head>
<body>

  <nav>
  <input type="checkbox" id="check">
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
     <i class="fa fa-bars" id="btn"></i>
     </a>
     <i class="fa fa-times" id="cancel" ></i>
     <div id="myLinks">
          <li><a href="#" >Home</a></li>
          <li><a href="#" >Forums</a></li>
          <li><a href="#" >Store</a></li>
          <li><a href="#" >Vote</a></li>
          <li><a href="#" >Contact us</a></li>
         
      </div>
      
  </nav>
</body>
</html>

CSS:（更换媒体）


@media (max-width: 980px) {
  #myLinks {
    display: none;
  } 

  li {
    position: relative;
    padding: 20px;
    width: 70%;
    background-color: orange;
    text-align: left;
    top: 80px;
    transition: all .4s;
  }

 #btn {
    display: block;
  }

  nav ul li a {
    font-size: 16px;
    color: #ffff;
  }

/* #check:checked + ul {
  left: 0;
} */
}

JS:

function myFunction() {
  var x = document.getElementById("myLinks");
  var cancelBtn= document.getElementById("cancel");
  //console.log(x)
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

您可以根据自己的喜好修改css

我的图标没有显示，我的响应式菜单也没有显示

My icon isnt showing and sldo my responsive menu not showing

html

javascript

css

media-queries

font-awesome