'Label tag not visible

Hey so recently I was creating navbar which has this code in html file

<!DOCTYPE html>
<html lang="en">
<head>
                <meta charset="UTF-8">
                <title>Page title</title>
                <link rel="stylesheet" href="css.css"></link>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                <script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
                <nav>
                                <h1>&nbsp;<a href="css.html" class="title">Logo</a></h1>
                                      <span class="menu-btn">
                                                    <input type="checkbox" id="check">
      <label for="check">
        <i class="fas fa-bars"></i>
      </label>
                                      </span>
                                <div class="nav-links">
                                                <a href="#"class="active">Item 1</a>&nbsp;&nbsp;
                                                <a href="#">Item 2</a>&nbsp;&nbsp;
                                                <a href="#">Item 3</a>&nbsp;&nbsp;
                                                <a href="#">Item 4</a>&nbsp;&nbsp;
                                </div>
                </nav>
</body>
</html>

And this is the CSS code

* {
     margin: 0;
     padding: 0;
}
body {
     margin: 0;
     padding: 0;
}
nav {
                background: black;
                color: white;
                height: 76px !important;
                line-height: 76px;
                color: white;
}
a {
                color: white;
                text-decoration: none;
}
.menu-btn{
                display: none;
}
@media(max-width: 600px){
                .nav-links{
                                display: none;
                }
                .menu-btn{
                                display: inline;
                }
}
@media(min-width: 600px){
                nav {
                                display: flex;
                                justify-content: space-between;
                }
                .nav-links a {
                                transition: .2s ease-in-out;
                                font-size: 20px;
                                padding: 7px 13px;
                }
                .nav-links a:hover, .nav-links .active{
                                background: white;
                                color: black;
                                border-radius: 12px;
                }
}

And the problem is that the label is not visible. Please tell me something fast. And yes now you are gonna say that I have made it display none so in the media queries is says display none. And please don't copy my code.⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

htmlcss


Sources

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

Source: Stack Overflow

Solution Source

Related Questions