漢堡圖標在小於500像素的屏幕上沒有顯示？

Question

我進行了搜索，但沒有任何幫助。 我無法顯示漢堡菜單。 它最初在屏幕寬度小於500px（這就是我想要的）時正確顯示，但是現在不會，而且我找不到使它消失的更改。 我覺得這是一個簡單的答案，但我無法弄清楚。

鏈接到我的筆： 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>

和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

因為您正在使用.hamburger類的display: none屬性，所以在第123行。將其刪除，它將顯示出來。

要隱藏大於500px的屏幕，請執行以下操作：

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