'How can I hide my nav bar when I shrink my website?

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]][1]

Here's my code

@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>
htmlcssnavbardisplaymobile-website


Solution 1:[1]

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

Solution 2:[2]

@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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abir Sheikh
Solution 2 Bogdan V

Related Questions