按下按鈕后，我的響應菜單沒有顯示

我有一個簡單的圖標，計劃是在被按下時，它應該顯示我的網站的菜單。

<nav class="navbar">
  <div class="bx bx-menu" id="menu-icon"></div>

我已經將navbar的原始顯示設置為none，當我按下按鈕時，活動類被賦予navbar，它應該顯示block，但是菜單沒有顯示。

下面是相關的css:

@media (max-width: 768px) {
    #menu-icon {
        display: block;
    }

    #darkMode-icon {
        position: absolute;
        right: 7rem;
        font-size: 2.6rem;
        color: var(--text-color);
        margin-bottom: .1rem;
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 3%;
        background: var(--bg-color);
        border-top: .1rem solid rgba(0, 0, 0, .2);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
        display: none;
    }

    .navbar .active {
        display: block;
    }

    .navbar a {
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
        color: var(--text-color);
    }

    .navbar a:nth-child(1),
    .navbar a:nth-child(2) {
        color: var(--text-color);
    }

    .navbar a.active {
        color: var(--main-color);
    }

    .navbar a::before {
        display: none;
    }
}

下面是我用的JS:

let menuIcon = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

menuIcon.onclick = () => {
  menuIcon.classList.toggle('bx-x');
  navbar.classList.toggle('active');
};

我檢查過了，當我點擊按鈕時，活動類被提供給了導航條，它也被正確地移除了。bx-x類也給了我的菜單ico n，它把它變成了一個X，這個函數起作用，因為圖標確實變成了一個X，所以JS應該沒問題，但是菜單沒有顯示出來。