html css responsive-design responsive hamburger-menu

Hamburger menu in navbar not working using html and css

*{
    padding:0;
    margin:0;
}

a{
    text-decoration:none;
    color:black;
}

ul{
    list-style:none;
}

/* Uppermost bar */

#upper_bar{
    min-height:10vh;
    max-width:100vw;
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    /* background-color: rgba(0,0,0,0.3); */
    color:black;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:2vw;
}

/* Header */

header{
    max-width:100vw;
    min-height:12vh;
    display:flex;
    justify-content: center;
    align-items: center;
}

nav{
    width:85%;
    height:100%;
    display:flex;
    justify-content:space-between;
}

#pic_of_logo{
    height:30px; 
    width:150px;
}

#menubar{
    display:flex;
    justify-content:center;
    align-items:center;
}

#sidebar{
    display:flex;
    justify-content: center;
    align-items: center;
    column-gap:4rem;
    font-size:1rem;
}

#hamburger{
    opacity:0;
}

#logo{
    display:flex;
    justify-content: center;
    align-items: center;
}

.button{
    border:1px solid black;
    height:35px;
    width:80px;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:5px;
}

#sign_up{
    background-color: rgb(35, 145, 204);
    color:white;
}

.menu_option:hover{
  color:greenyellow;
}

.button:active{
    transform:scale(1.04);
}

#click{
    display:none;
}


/* Media query for uppermost bar */
@media screen and (max-width:1024px){
    #hamburger{
        opacity:1;
    }

    #sidebar{
        flex-direction:column;
        position:absolute;
        top:17%;
        left:0%;
        width:100%;
        color:white;
        background-color:rgba(0,0,0,0.1);
        padding-top:15px;
        padding-bottom:15px;
        row-gap:2rem;
        display:none;
    }

    .button{
        width:100vw;
    }
    
    .menu_option:hover{
        color:rgb(168, 84, 98);
    }

    #click:checked ~ #sidebar{
        display:block;
    }
    
}

@media screen and (max-width:991px) {
    #upper_bar{
     font-size:2.8vw;
    }
 }

@media screen and (max-width:570px) {
    #upper_bar{
     font-size:3.8vw;
    }
 }

@media screen and (max-width:427px){
    #pic_of_logo{
        height:27px; 
        width:134px;
    }

    nav{
        width:92%;
        height:100%;
        display:flex;
        justify-content:space-between;
    }
    
    #sidebar{
        column-gap:0rem;
    }
}

@media screen and (max-width:320px){
    nav{
        width:95%;
        height:100%;
        display:flex;
        justify-content:space-between;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div id="upper_bar">
     <p id="upper_para">Welcome to HelpHub - Where Solutions Meet Innovation!</p>
    </div>
    <header>
        <nav>
          <input type="checkbox" id="click">
          <div id="logo">
            <img id="pic_of_logo" src="helphub_logo.png">
          </div>
          <div id="menubar">
           <ul id="sidebar">
            <li><a href="#" class="menu_option">Products</a></li>
            <li><a href="#" class="menu_option">Customers</a></li>
            <li><a href="#" class="menu_option">Pricing</a></li>
            <li><a href="#" class="menu_option">Resources</a></li>
            <li><a class="button" href="#">Sign in</a></li>
            <li><a class="button" id="sign_up" href="#">Sign up</a></li>
           </ul>   
           <label for="click">
            <i class="fa-solid fa-bars" id="hamburger"></i>
          </label>
          </div>
        </nav>
    </header>
</body>    
</html>

I am a beginner just ended up with learning HTML and CSS and went onto doing of project but while doing it,i got stuck in making of hamburger menu though i am following the steps rightly from video still its not working.

As I have just completed HTML and CSS hence I am trying to do hamburger menu using this knowledge rather than java script as i haven't yet learned

So,can anyone rectify my error of why the menu not appearing?

Solution

Error is all about placing <input type="checkbox" id="click" /> on right place in code, it has to be in div with id menubar , please check what is tilda ~ in css [1]: https://www.w3schools.com/cssref/sel_gen_sibling.php . What trigers menu to open up is #click:checked ~ #sidebar { display: block; } so you could know what code is doing

Here is fixed code snipped, look at <input type="checkbox" id="click" /> where is placed.

* {
        padding: 0;
        margin: 0;
      }

      a {
        text-decoration: none;
        color: black;
      }

      ul {
        list-style: none;
      }

      /* Uppermost bar */

      #upper_bar {
        min-height: 10vh;
        max-width: 100vw;
        background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
        /* background-color: rgba(0,0,0,0.3); */
        color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2vw;
      }

      /* Header */

      header {
        max-width: 100vw;
        min-height: 12vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      nav {
        width: 85%;
        height: 100%;
        display: flex;
        justify-content: space-between;
      }

      #pic_of_logo {
        height: 30px;
        width: 150px;
      }

      #menubar {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #sidebar {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 4rem;
        font-size: 1rem;
      }

      #hamburger {
        opacity: 0;
      }

      #logo {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .button {
        border: 1px solid black;
        height: 35px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
      }

      #sign_up {
        background-color: rgb(35, 145, 204);
        color: white;
      }

      .menu_option:hover {
        color: greenyellow;
      }

      .button:active {
        transform: scale(1.04);
      }

      #click {
        display: none;
      }

      /* Media query for uppermost bar */
      @media screen and (max-width: 1024px) {
        #hamburger {
          opacity: 1;
        }

        #sidebar {
          flex-direction: column;
          position: absolute;
          top: 17%;
          left: 0%;
          width: 100%;
          color: white;
          background-color: rgba(0, 0, 0, 0.1);
          padding-top: 15px;
          padding-bottom: 15px;
          row-gap: 2rem;
          display: none;
        }

        .button {
          width: 100vw;
        }

        .menu_option:hover {
          color: rgb(168, 84, 98);
        }

        #click:checked ~ #sidebar {
          display: block;
        }
      }

      @media screen and (max-width: 991px) {
        #upper_bar {
          font-size: 2.8vw;
        }
      }

      @media screen and (max-width: 570px) {
        #upper_bar {
          font-size: 3.8vw;
        }
      }

      @media screen and (max-width: 427px) {
        #pic_of_logo {
          height: 27px;
          width: 134px;
        }

        nav {
          width: 92%;
          height: 100%;
          display: flex;
          justify-content: space-between;
        }

        #sidebar {
          column-gap: 0rem;
        }
      }

      @media screen and (max-width: 320px) {
        nav {
          width: 95%;
          height: 100%;
          display: flex;
          justify-content: space-between;
        }
      }

 <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
<div id="upper_bar">
      <p id="upper_para">Welcome to HelpHub - Where Solutions Meet Innovation!</p>
    </div>
    <header>
      <nav>
        <div id="logo">
          <img id="pic_of_logo" src="helphub_logo.png" />
        </div>
        <div id="menubar">
          <input type="checkbox" id="click" />
          <ul id="sidebar">
            <li><a href="#" class="menu_option">Products</a></li>
            <li><a href="#" class="menu_option">Customers</a></li>
            <li><a href="#" class="menu_option">Pricing</a></li>
            <li><a href="#" class="menu_option">Resources</a></li>
            <li><a class="button" href="#">Sign in</a></li>
            <li><a class="button" id="sign_up" href="#">Sign up</a></li>
          </ul>
          <label for="click">
            <i class="fa-solid fa-bars" id="hamburger"></i>
          </label>
        </div>
      </nav>
    </header>