Can I set the dropdown toggle to open a webpage and hover to open the dropdown list?

Hi,

I am relatively new to webflow. I would like to ask if I can set the dropdown toggle in the navbar to open a page and hover over the toggle to open the dropdown list? I asked this because I can do it in editor X but can’t figure out a way to do it in webflow. See my below website link and in the navbar, “The Ideas Factory” points to a webpage but opens the dropdown list on hover. Anyone who knows how to do this please kindly advise.

Thanks,
Dave


Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])

Hello @DaveWong
Can you share you project readonly link.


or

Hello @Haji_Khan_Keerio ,

Please see my shared link below. I have modified my design a little and now my navbar looks different to the website that I had shared in the first post. But I am still interested to know if it is possible to click on a dropdown toggle to go to a webpage instead of just opening the dropdown list. Thanks.

https://preview.webflow.com/preview/institute-of-insights?utm_medium=preview_link&utm_source=dashboard&utm_content=institute-of-insights&preview=e37cc967ae88359aef7a262c880db542&workflow=preview

Hello @Haji_Khan_Keerio ,

To add on for clarity, I wish to find out if it is possible in webflow to design the navbar in the following way. Hover over a dropdown toggle to open the dropdown list instead of clicking on the dropdown toggle to open the dropdown list. Clicking on the dropdown toggle would instead open a webpage.

Please see https://www.instituteofinsight.com/

In the above website designed in editorX, upon hovering over the “The Ideas Factory” in the navbar, the dropdown appears. Clicking on the “The Ideas Factory” opens a webpage.

Thanks.

Regarding the open-on-hover, yes;

image

Regarding the navigate on clicking the dropdown parent… that’s not built into Webflow, however you could do it easily with an id and a bit of jQuery.

The problem is, how would that work on a mobile device, where there is only clicking and no hover? There, you would effectively be making the dropdown menu inaccessible, because a tap would both open it and navigate at the same time.

You would essentially need to build two separate navs, one for mobile, and another for desktops. Even then, desktop users who favor touch screen displays would run into problems with your nav.

In general, best practice is to assume that mouseover (hover) does not exist. It’s fine for styling, e.g. highlight a button before you click it, or animate a news item on mouseover- but never depend on mouseover as part of your functionality or navigation.

Hi @memetican ,

Thank you for the reply. Actually on mobile navigation, there is both a clickable dropdown toggle and a clickable dropdown arrow. The first opens a webpage while the latter opens the dropdown list.

Nevertheless, you post is very helpful. By the way, is it difficult to implement this functionality on jQuery?

Thanks,
Dave

Hi Dave,

Yes very easy to do, here’s a Loom video showing it;

Demo site where you can see it in action;

Read-only link

https://preview.webflow.com/preview/clickable-dropdown-nav?utm_medium=preview_link&utm_source=dashboard&utm_content=clickable-dropdown-nav&preview=7032c9817633320f914b03612bb83040&workflow=preview

Code;

$(function() {
  
  $( "#DropdownMenu" ).click(function() {
    window.location.href = '/styleguide';
  });
  
});

And CodePen, in case you want to fork and experiment;

Hope that does the trick for you.