htmlcssresponsive-designresponsivehamburger-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>