Navigation bar hover

Is it possible to implement a function which will open the navigation bar if you hover over it? And also make the button’s in the header clickable, so not only the products but also the word ‘‘products’’?

Hey @Daan,

Thanks for writing in! We understand your concerns. We’ve moved away from hover menus to be more in line with changing industry standards, for the key reasons below:

  1. An increasing amount of research that shows that hover can pose problems for users as it is easy to accidentally activate, causing customers to incorrectly click on the menu when they are trying to navigate content behind the dropdown area. Additionally, menus that require multiple levels of dropdown are very frustrating to use with hover.

  2. Touch-based devices such as smartphones and tablets do not support hover, so a click menu must be included. Including two kinds of behavior instead of one increases the complexity of the code and slows down the site. This can have a negative impact on performance and the Lighthouse score, which can affect traffic to your store.

  3. Hover menus require the user to move the cursor in a very particular path, and can pose challenges for disabled users, and can open your store up to lawsuits.

Instead of using hover menus, we suggest restructuring your navigation items so the most important or frequently visited links are instead added as top-level, non-dropdown links.

Alternatively, our themes include the “Enable links to drop-down link headings” setting that can be used to automatically add a link for the parent menu item, to the dropdowns:

We appreciate the time taken to submit this feature request, please let us know if we can help with anything else.

Dear Quewayne,

Thank you for your fast reply. It’s very clear to me why this feature is not included in the current theme.
What do you exactly mean with a top-level, non-dropdown link?

I’m looking forward to hearing from you.
Kind regards,

Hey @Daan,
What I was referring to are links that aren’t children of other links. For instance, you can see the top-level links below:

Let us know if you have further questions.

Dear Quewayne,

Thanks for your fast response. All clear now!

With kind regards,

1 Like