How can I hide my nav bar when I shrink my website?-CodePudding

I'm making a basic website right now and I'm trying to get my Navbar to disappear when I shrink the website.

But it doesn’t disappear and I'm not sure why [picture shows my nav bar after I put in the code][1]

Here's my code

CSS

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

HTML

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

<head>
  <title>Nai Cha Life</title>
  <link rel="stylesheet" href="styles.css">
</head>
    
<body>
    <nav>
        <ul >
            <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 ><a href="#History">History</a></li>
            <li ><a href="#Contact">Contact</a></li>
            <li ><a href="">&#9776;</a></li>
        </ul>
    </nav>  
    
    </body>
    
</html>

CodePudding user response：

It's working fine on my machine. Here's what can go wrong:

You misspelled CSS file name
You must put media queries at the very bottom of the CSS file

CodePudding user response：

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

This to answer directly to your question. In this way you will hide all your nav to all the resolutions maxim to 600px width. Its not the correct method to hide your nav. For example to make a responsive navigation you need css and a little bit javascript. With css you will hide your navigation, you will use a little bit a javascript to add a new class to nav element wich you hide previously in css when you will click an item an dshow again. You should search for examples, and study a little bit how othe people do.