Hamburger Menu with Swooshy X close button
See the demo in action
- Watch the Video.
- Download the zip file.
- Copy both the
<header class="nav">
and the <header class="desktop">
in their entirety and paste them into your website.
- Copy the css styles for the mobile version.
- Copy the css styles for the desktop version (inside the media query for min-width: 768px).
- Copy the javascript code from the script.js file and place it at the very top of your script.js file.
- Make sure you are linking to JQuery just above your closing
</body>
tag.
- Shrink and grow your new menu options and revel in the magic.
- Change BOTH sets of links to your own links.
- style your desktop nav how you want it.