I have a website with a menu element in a header grid and when the page is first displayd the menu is visible. I have a hamburger element which I want to use to toggle the menu display when it is clicked.

The CSS for the menu is:

/*==================================================================*/
/* NAVIGATION */
.main-nav {
    grid-area: N;
    text-transform: uppercase;
}

/* Style the nav links */
.main-nav ul {
    display: grid;
    grid-template-columns: repeat(4,20vw);
}

.main-nav li {
    /* No bullets */
    text-align: center;
    list-style-type: none;
    min-width: 20vw;
}

.main-nav a {
    /* Not italic unlike all other a elements */
    text-decoration: none;
    font-style: normal;
}

The hanburger uses a javascript function:

/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function toggleMenu() {
    let menu = document.getElementById("main-nav");

    if (menu.display == "none"){
        alert("Hidden");
        menu.style.display = "grid";
    }
    else {
        alert("Displayed");
        menu.style.display = "none";
    }
 
};

When the page loads, this function is used in the hamburger's click event listener:

 document.getElementById("hamburger").addEventListener("click", toggleMenu);

Now, what happens is this - the page loads, the menu is visible:

I click on the hamburger the alert tells me the menu is currently visible:

Then the menu is hidden:

However, if I now click the hamburger again I get a message telling me that the menu is displayed(!) and it does not re-appear:

So, what I don't understand is why the element's style.display status is incorrect when the menu is clearly display:none;?

Of course, this then means that the function fails to re-show the menu as the status check is incorrect.

If you need any more code let me know but as far as I can see all the code involved is in the question.

Thanks in advance,

Dermot