# How to open hamburger menu on hover, close when link clicked on mobile?

**URL:** <https://forum.readymag.com/t/how-to-open-hamburger-menu-on-hover-close-when-link-clicked-on-mobile/1015>\
**Category:** General topics\
**Created:** [December 15, 2022, 7:57pm UTC](https://forum.readymag.com/t/how-to-open-hamburger-menu-on-hover-close-when-link-clicked-on-mobile/1015 "2022-12-15T19:57:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![RinseandRepeat](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/rinseandrepeat/32/731_2.png) [@RinseandRepeat](https://forum.readymag.com/u/RinseandRepeat)\
**Post date:** [December 15, 2022, 7:57pm UTC](https://forum.readymag.com/t/how-to-open-hamburger-menu-on-hover-close-when-link-clicked-on-mobile/1015/1 "2022-12-15T19:57:08Z")

</div>

Hey everyone, has anyone had good luck with hamburger menus? There are a few functions I’m trying to figure out, and would appreciate any guidance on any of the following functions! I’d love a menu that could ideally:

- Web menu opens when cursor hovers over button
- Web menu closes automatically when cursor moves off menu box
- Web/Mobile menu closes when any menu item link is selected
- Mobile menu hamburger icon switches to X when menu is open

---

<div class="post-metadata">

**Author:** ![HEADLESS.HORSE](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/headless.horse/32/144_2.png) [@HEADLESS.HORSE](https://forum.readymag.com/u/HEADLESS.HORSE)\
**Post date:** [December 22, 2022, 2:02pm UTC](https://forum.readymag.com/t/how-to-open-hamburger-menu-on-hover-close-when-link-clicked-on-mobile/1015/2 "2022-12-22T14:02:07Z")

</div>

Hi @RinseandRepeat I can suggest the following solutions.

**Web menu opens when cursor hovers over button**  
You can create multiple triggers for animations. So creating a menu button for desktop and one for mobile that have different effects on trigger.

**Web/Mobile menu closes when any menu item link is selected**  
Again you can make a trigger when clicking a link to toggle the menu effect.

**Mobile menu hamburger icon switches to X when menu is open**  
You’ll need to elements ontop of each other, on clicking the menu icon, the opacity is set to 0% and then the other element ‘X’ is then changed to 100% opacity.

If this proves to be too much to create using the ReadyMag tools. I suggest with fixed navigation to code one yourself and insert into the head of your project.