Label tag not visible-CodePudding

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" >Logo</a></h1>
                                      <span >
                                                    <input type="checkbox" id="check">
      <label for="check">
        <i ></i>
      </label>
                                      </span>
                                <div >
                                                <a href="#">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.⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

CodePudding user response：

The label is wrapped in a span with the class name menu-btn.

but in CSS in menu-btn rule set have display:none;.

Try removing display:none in menu-btn.

* {
    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 {
   
}

@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;
    }
}

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
    <title>Page title</title>
    <link rel="stylesheet" href="css.css"/>
    <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" >Logo</a></h1>
        <span >
            <input type="checkbox" id="check">
            <label for="check" style="width:30px;">
                <i ></i>
            </label>
        </span>
        <div >
            <a href="#" >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>