Help me change this show/hide menu when screen size < 767px

JavaScript
1

So i have this menu now, thats working fine:

It shows/hides exactly as i want i to.

But when screen size is below 767px i want it to collapse down so only the “M”, the trigger, is shown. And when u click the trigger i want the menu to slide in downwards instead of from the right.

Here is how the it looks when i make take the float: left from the <li>.

Can u add media queries to the jquery code or how would u do this?

thanks in advance.

2

Here’s a good piece about how to do it, using window.matchMedia

3

Thanks! Goin to check it out!