当我缩小我的网站时，我如何隐藏我的导航条？

Question

我现在正在做一个基本的网站，当我缩小网站的时候，我想让我的Navbar消失。

但它并没有消失，我不知道为什么图片显示我的导航栏后，我放了code[][1]

这是我的密码

​

@media screen and (max-width: 600px) {
  ul.topnav li:not(:nth-child(1)) {
    display: none;
  }
}

<!doctype html>
<html lang="en">

<head>
  <title>Nai Cha Life</title>
  <link rel="stylesheet" href="styles.css">
</head>
    
<body>
    <nav>
        <ul class="topnav">
            <li><a href="#home">Home</a></li>
            <li><a href="#reviews">Reviews</a></li>
            <li><a href="#types">Types</a></li>
            <li><a href="#receipes">Receipes</a></li>
            <li class="topnav-right"><a href="#History">History</a></li>
            <li class="topnav-right"><a href="#Contact">Contact</a></li>
            <li class="dropdownIcon"><a href="">&#9776;</a></li>
        </ul>
    </nav>  
    
    </body>
    
</html>

​

Answer 1

在我的机器上很好用。以下是可能出错的地方：

• 您拼错了CSS文件名
• 您必须将媒体查询放在CSS文件

的最底部。

Answer 2

@media screen and (max-width: 600px) {
 nav  {
  display: none;
 }
}

这是直接回答你的问题。这样，您将隐藏您所有的导航到所有的决议，最大的600 In宽度。这不是隐藏导航的正确方法。例如，要进行响应导航，您需要css和少量的javascript。使用css，您将隐藏您的导航，您将使用少量的javascript添加一个新的类到nav元素(您以前隐藏在css中)，然后再次单击dshow中的一个项。你应该寻找例子，并研究一下人们是怎么做的。