Hamburger dropdown animation does not work

Background: trying to make a hamburger menu.

Problem1 : when manually adding class “showing” into chrome console, menu drops down.
But cannot get it to work with jquery/vanilla JS in codepen.

Problem 2: There is a 20 px bottom padding on the nav bar I need to remove.
I can just set the menu with margin-top: -20px, but I think there is a better way to do this.

Here is my codepen

Maybe try $('.handle') instead of $('handle')? I suggest you give an id to that menu element like my_manu, and access is as $(’#my_menu’).

Note $('.handle') will select all elements come with handle class, returns an array.

wow. thanks This is the 1st time I use jquery. Not really familiar with the syntax and all.

now only one problem left, the 20px padding that coming out of no where…

By default browser adds top padding for the ul tag. yOu may ignore this value by overriding the margin as margin: 0;

wow. thanks! I guess this kind of knowledge can only comes from experience…