Javascript toggle element display

Question

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.

/*==================================================================*/
/* 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;
}

Answer 1

In the end it was a simple error of leaving out .style as per Simon K's comment:

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

Answer 2

Try this instead!