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

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?

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:

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.

1 Like