在移动设备上单击汉堡包图标时，导航栏未显示

Question

所以，我正在制作一个 django Web 应用程序，并且我设计了模板以在用户单击汉堡包图标时显示导航栏，但当前单击该图标时，没有任何显示。

HTML：

<nav>
    <ul class="show">
        <li><a href="#whatwedo">What We Do?</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#about-page">About Us</a></li>
        <li><a href="#contact" class="contact-btn">Contact Us</a></li>
        
    </ul>
</nav>
<div class="hamburger-menu">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>

CSS：

@media only screen and (max-width: 768px) {
    nav {
        display: none;
        /* Hide the nav by default on mobile */
    }

    .hamburger-menu {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        cursor: pointer;
        padding: 10px;
        z-index: 1001;
        /* Ensure the hamburger icon is above other elements */
    }

    .bar {
        width: 25px;
        height: 3px;
        background-color: #ffffff;
        margin: 5px 0;
    }

    /* Show the nav links when hamburger icon is clicked */
    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        transition: transform 0.3s ease;
        /* Add transition property */
        transform: translateY(-100%);
  
        position: fixed;
        top: 0;
        right: 0;
        background-color: #ffffff;
        border: 1px solid #ccc;
        padding: 10px;
        z-index: 1000;
    }

    nav ul.show {
        transform: translateY(0);
        /* Slide down to show menu */
    }
}

/* Media query for larger screens (computers) */
@media only screen and (min-width: 769px) {
    .hamburger-menu {
        display: none;
        /* Hide hamburger icon on larger screens */
    }

    nav {
        display: block;
        /* Show the nav on larger screens */
    }
}

JavaScript :

<script>
    document.addEventListener("DOMContentLoaded", function () {
            console.log('DOMContentLoaded event fired');
            var hamburgerMenu = document.querySelector('.hamburger-menu');
            var navMenu = document.querySelector('.container nav ul');
            console.log('Hamburger menu:', hamburgerMenu);
            console.log('Nav menu:', navMenu);
            // Check if elements are found
            if (hamburgerMenu && navMenu) {
                console.log('Event listener added to hamburger menu');

                hamburgerMenu.addEventListener('click', function () {
                    console.log('Hamburger menu clicked');
 navigation menu
                    navMenu.classList.toggle('show');
                    console.log('Nav menu visibility toggled');
                });
            } else {
                console.error('Unable to find hamburger menu or nav menu');
            }
        });
</script>

我已经添加了一些控制台语句来查看 javascript 是否存在问题，我认为输出不会有任何我所期望的：

我还尝试查看我的 html 和 css，看看是否存在我忽略的问题，但找不到。

Answer 1

像下面一样使用。

@media only screen and (min-width: 769px) {
    .hamburger-menu {
        display: none !important;
        /* Hide hamburger icon on larger screens */
    }

    nav {
        display: block !important;
        /* Show the nav on larger screens */
    }
}