'How to get a navbar behind a other screen

My question is how I can get the above display to dispear, after I click on the button in the top right corner.

Where it should disapear

The normal screen, where i click on the menubar

 <nav>
       <input type="checkbox" id="check">
       <label for="check" class="checkbtn">

        <img src="../Pictures/menu.png" onclick="changeinput()" style="margin-bottom:-8px;width: 40px;" alt="">
    </label>

        <label class="logo">VOCA.</label>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="./contact/contact.html">Contact</a></li>
            <li><a href="./Aboutus/about.html">About</a></li>
            <li><a href="/login">Login</a></li>
        </ul>

    </nav>
htmlcssnavbar


Solution 1:[1]

You can check if it is checked with css and then display your nav or don't display your nav.

#check:checked ~ .nav-ul {
    display: none;
}

.nav-ul {
    display: block;
}
<!DOCTYPE HTML>
<html>
<head>
    <script src="index.js"></script>
    <link href="index.css" rel="stylesheet" />
</head>
<body>
    <nav>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">

            <img src="../Pictures/menu.png" onclick="changeinput()" style="margin-bottom:-8px;width: 40px;" alt="">
        </label>

        <label class="logo">VOCA.</label>
        <ul class="nav-ul">
            <li><a class="active" href="#">Home</a></li>
            <li><a href="./contact/contact.html">Contact</a></li>
            <li><a href="./Aboutus/about.html">About</a></li>
            <li><a href="/login">Login</a></li>
        </ul>

    </nav>
</body>
</html>

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 krani

Related Questions