Webflow Dropdown, Click to open on Tablet but Hover on Desktop

Design help Animations & Interactions
1

Hey All,

I know this is a question that’s been asked before on the forum however I believe it’s worthy of a revisit.

I want a navbar dropdown that opens on click on tablet but on hover on desktop.

I’ve seen threads such as this where Vincent helpfully suggests creating two navbars and hiding one and i’ve been able to get the desired effect using that method.

However I came across this template where they are achieving the correct effect with only a single navbar.

I’ve been working on this for a while now and I have tbh i’m completly stumped as to how they are achieving it. They have a custom animation to open/close on click for tablet and below and have “open on hover” checked. For them it seems to work but for me - nothing!! Can anybody help?

1 Like
2

Anyone understand this? I’d love to know how it’s achieved. Had to just use the double dropdown display:none / display:block for tablet / desktop in the end. It works fine just seems less elegent somehow :slight_smile:

3

Hi Dave,

Appreciate it’s a while ago that you posted this but I’ve come up against this problem today so thought I’d shine some light on it for anyone else searching!

It’s quite clever what they’ve done on the template. It looks to me like it’s using a combination of a built-in and a custom dropdown. They have an on click interaction which increases the height of the Nav Dropdown List. It looks like that Nav Dropdown list is set to position: absolute when desktop or higher, and position: static when tablet or below.

So when it’s on a tablet, even though the hover event is triggering, the Nav Dropdown List to appear, it’s still appearing within an element that’s set to height: 0. Then when the user clicks it, the interaction animates the height to height: auto.

There’s a guide here on Webflow University which shows how the custom part of it’s done.

2 Likes
4

I’ve just had the same problem too, and after some digging i’ve come up with another solution. I’m sharing it here in case anyone else needs it.

I realised that Webflow applies an attribute data-hover="true" to the dropdown which decides if it should open on hover or not. We just need to set this to false on the desired screen size.

SCR-20250108-lhys
SCR-20250108-lhys840×452 74.6 KB

To get the desired behaviour, set it to open on hover by using the settings panel then use the following js code to disable hover on tablet:

<script>
// Dynamically control hover behavior based on screen size
document.addEventListener('DOMContentLoaded', () => {
  const dropdowns = document.querySelectorAll('.navbar_menu-dropdown');

  if (window.innerWidth <= 991) {
    dropdowns.forEach((dropdown) => {
      dropdown.setAttribute('data-hover', 'false');
    });
  }
});
</script>

Replace .navbar_menu-dropdown with the classname of your dropdown element (this should be the parent of the toggle and the menu).
You can change window.innerWidth <= 991 to 767 for mobile landscape or 479 for mobile portrait.

Hope it helps!