Open Mobile Nav Menu on Hover

[Fagan_Wilcox]

Hi guys,

Sorry if this is simple… but the default navigation I drag in is great. Normally clients always want to simply click the hamburger icon to initiate the dropdown… however I have a client that wants the same thing, but with a hover over the nav bar instead.

Please help!

[sabanna (Anna)]

Hi @Fagan_Wilcox.

Standard Webflow navbar doesn’t have “Open on Hover” option. So, unfortunately, you will have to create the custom navbar and use interactions with hover trigger.

Cheers,
Anna

[cyberdave (Dave S.)]

Hi @Fagan_Wilcox,

Here is something to try, first give the menu button a class name like “menu-button”

Then go to your site settings, and go to the Custom Code tab. In the Footer of the site, paste the following code:

<script>
$('.menu-button').hover(
  function() {
    $( this ).click();
  }
);
</script>

After pasting the code into the Footer, save changes and republish the site.

This should work so that when the user hovers over the menu button, it is clicked and should open. This will only work on the published site.

I hope this helps!