Hamburger icon not showing on screen width less than 500px?

Question

I have searched but nothing has helped. I cannot get the hamburger menu to show up. It originally showed correctly when screen width was less than 500px (which is what I wanted) but now it won't and I can't find what change has made it disappear. I feel like its a simple answer but I cannot figure it out.

Link to my pen: https://codepen.io/idfc/pen/gBdmPK

background-image: linear-gradient(to right top, #051937, #004d7a, 
    #008793, #00bf72, #a8eb12);
    <div class="top">
        <div class="nav-bar">
          <input type="checkbox" id="toggle">
          <label for="toggle" class="hamburger">
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
           </label>

              <div class="Logo">Logo</div>
              <div class="nav-links"> 
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Links</a>
                <a href="#">Contact</a>
          </div>
        </div>
      </div>

and css;

.top {

    background-image: linear-gradient(to right top, #051937, #004d7a, 
    #008793, #00bf72, #a8eb12);

    }
    .beaker {
    display: none;
    }

    h1 {
    margin-left: 5%;
    margin-right: 5%;
    }

    #toggle {
    display: none;
    }
    .Logo {

    color: white;
    font-size: 22px;
    }

    a {
    display: none;}


   .hamburger {
    display: block;
    margin: 0;


    }

    .hamburger span {
    display: block;
    width: 35px;
    background-color: white;
    height: 5px;


    }

    .calculator {
    display: none;
    }

    @media only screen and (min-width: 500px) {



a {
    display: inline;
    font-size: 18px;
    text-decoration: none;
    color: white;
    margin-right: 80px;
    margin-left: 5px;
    }

    a:hover {
    color: black;
    }

    .beaker {
    display: block;
    width: 500px;
    height: 500px;
    margin-left: 30%;
    box-shadow: 20px 20px 10px grey;
    } 

    .calculator {
    display: block;
    box-sizing: border-box;
    max-width: 400px;
    margin: 0 auto;
    background-color: #f6f6f6;
    border: 4px solid black;
    border-radius: 5px;
    box-shadow: 20px 20px grey;
    }

    .calculator input {
    background: none ;
    border: none;
    box-shadow: none;
    border: none;
    width: 100%;
    border-bottom: 2px solid #111;
    padding: 20px;
    text-align: right;
    font-size: 40px;
    }

    .calc-buttons {
    font-size: 42px;
    border-radius: 5px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #111;
    padding: 20px;
    margin-left: 10px;
    }
    .calculator-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
    }

    .is-clear {
    grid-column: span 3;
    background-color: blue;
    }

    .is-equals {
    grid-column: span 3;
    background-color: green;
    }
    }
    .hamburger {
    display: none;
    }

.Logo {
    margin-left: 5px;
    font-size: 20px;
    padding-top: 5px;
}

.words {
    margin-top: 50px;
}

Answer 1

Because you're using the display: none property on the .hamburger class, line 123. Remove that and it will appear.

To hide above screen size of 500px:

@media only screen and (min-width: 500px) {
    .hamburger {
        display: none;
    }
}