How to go about adding a hamburger menu for basic CSS sticky navbar?

Question

I've made a basic navigation bar sticking at the top of my page, but admittedly I'm having trouble understanding how to create a hamburger menu using CSS for smaller screen sizes (I'm still new to JavaScript and haven't the faintest idea on how to deal with creating a script for the nav bar). I'd just like to turn it into a column at the very least, I know it's possible to do this w/CSS using the checkbox, but I've had trouble implementing it myself.

* {box-sizing: border-box;}

body {font-family: Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0;}

.navbar {background-color: rgba(50, 150, 220, 1);
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
         height: 50px;
         position: fixed;
         top: 0;
         overflow: hidden;
         color: white;
         padding: 25px 25px;}

.navbar ul {display: flex;}

.navbar ul li {list-style-type: none;}

.navbar ul li a {display: block;
                 text-decoration: none;
                 color: white;
                 padding: 1rem;}

.navbar ul li a:hover {background-color: rgb(200, 200, 200);}

main {height: 1500px;}

<header>
  <nav class="navbar">
    <h2>Site name</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Settings</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

    

I tried setting the navbar class in the media query to "flex-direction: column;" with no luck.

Answer 1

here is the below code with checkbox toggling to open and close html Hemberger.

* {box-sizing: border-box;}

body {font-family: Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0;}

.navbar {background-color: rgba(50, 150, 220, 1);
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
         height: 50px;
         position: fixed;
         top: 0;
         overflow: hidden;
         color: white;
         padding: 25px 25px;}

.navbar ul {display: flex;}

.navbar ul li {list-style-type: none;}

.navbar ul li a {display: block;
                 text-decoration: none;
                 color: white;
                 padding: 1rem;}

.navbar ul li a:hover {background-color: rgb(200, 200, 200);}

main {height: 1500px;}


/* New Code */
/* for large device */
.navbar #bar,
.navbar [for='bar']{
  display: none;
}

/* for small device */
@media(max-width: 500px){
  .navbar{
    position: relative;
    overflow: visible;
    
    
  }
  .navbar ul{
    display: none; 
  }

  .navbar [for='bar']{
  display: block;
  cursor: pointer;
  }
 
  

 
  
 
  
  .navbar input:checked ~ ul{
    display: block;
    position: absolute;
    top: 100%;
    background:red;
    border: solid;
    left: 0px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-size: 17px;
  }
}

<header>
  <nav class="navbar">
    <h2>Site name</h2>
    <input type="checkbox" id="bar"/>
    <label for="bar"> 
      <svg fill="#fff" viewBox="0 0 100 80" width="40" height="40">
        <rect width="100" height="20"></rect>
        <rect y="30" width="100" height="20"></rect>
        <rect y="60" width="100" height="20"></rect>
      </svg>
    </label>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Settings</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>