При нажатии на значок гамбургера на мобильных устройствах панель навигации не отображается

Итак, я делаю веб-приложение на django, и я разработал шаблон для отображения навигационной панели, когда пользователь нажимает на значок гамбургера, но в настоящее время при нажатии на значок ничего не отображается.

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, чтобы посмотреть, нет ли там какой-нибудь проблемы, которую я упустил из виду, но не могу ее найти.

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