Disable click for dropdown on desktop

Design help General
1

Is there a way to disable to click action on dropdowns for desktop? I’m using drop down elements in my nav. I still want them to expand/contract dropdowns on mobile.

More specifics:
We’ve created a nav that works like the morphing nav on Stripe…

In order to do this, the background box is not directly connected to the nav drop down. We use the entire menu to trigger the background box on hover. Since it is not directly tied to the nav item, it stays open when the nav item dropdown is clicked. See video.

I can write code to close/open the background on click but would rather disable it, especially if that’s an option available in the Webflow designer.

Note: if I did this again, I’d probably build the HTML in Webflow and not use any WF interactions. Instead I would do all CSS and JS in code.

Here is my site Read-Only: Webflow - OwnID 2024

2

A few approaches;

You could force it open at that breakpoint with custom CSS.
e.g. this would force all dropdowns open at desktop and above;

<style>
@media screen and (min-width: 992px) {
    .w-dropdown-list {
        display: block !important;
    }
}
</style>

Or, you could redesign it so that you’re using interactions instead of a dropdown. Or you could use script to override its behavior but that’s overcomplex.