Html – On clicking the hamburger icon on mobile devices, the navigation bar is not showing up

So, I am making a django web application, and I have designed the template to show the navigation bar when user clicks on the hamburger icon, but currently on clicking the icon, nothing is showing.

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>

I have put some console statements to see if there is the problem with javascript, and I don’t think so that there is any as the outputs were, what I was expecting :
Output on the console screen

Also I tried looking into my html and css to see if there is some problem which I was overlooking, but can’t find one.