Responsive Menu wont work on smaller resolutions.

Hi Maria,

I hope I'm looking at the right problem here.

I think the offending css code is your transform here:

#navigation {
    margin: 0 auto;
    opacity: 0;
    padding-top: 1.5em;
    transform: translate(0px, -700px);
    transition: transform 0.15s ease 0s, opacity 0.7s ease 0s;
}

At wider widths moving it up 700px is enough to get it off screen because the .grid items are layed out horizontally and the element isn't very tall. At smaller widths though this element gets to be more than 700px tall and so you end up not quite moving it all the way off the top of the screen. So when you click on that strip on the top you're clicking on the #navigation element which you have some code which prevents the click from bubbling up.

So the nav element never receives the click.

You could try increasing the -700px but I suppose you're always running the risk of this happening. You should think about a more reliable way of getting it off screen.

Or maybe instead of having these overlapping click areas with your nav and #navigation elements which cause a conflict you could have your .site-width element be a full width strip at the top and dedicated to opening and closing the menu. Then your #navigation element can slide down and up as needed.

Then you shouldn't need the .stopPropagation code you have for #navigation.