responsive navigation menu : ( using html and Css ) Toggle menu not working

Question

I am working on a simple navigation menu on building a ecommerce site. I want the menu to be responsive when I re-size the window less than 800 px but the toggle menu is not working its not disappearing when I touch the menu icon, the options are already showing and not disappearing

#here is the link to my code https://github.com/roshini004/ecommerce-site.git

Answer 1

Firstly, in Javascript, we tend not to start variables with capital letters like MenuItems; it might mess up some OOP things in JS and sometimes autocomplete might mix it up.

But in this case, you need to camel case css styles in javascript. (maxHeight, not maxheight)

var MenuItems = document.getElementById("MenuItems");

MenuItems.style.maxHeight = "0px";

function menutoggle() {
    console.log("clicked");
    if(MenuItems.style.maxHeight == "0px")
        {
        MenuItems.style.maxHeight = "200px";
    }
    else
    {
        MenuItems.style.maxHeight = "0px";
    }
}