Dropdown that has FULL Browser Width

[FernDiggidy (Fernando)]

Hello All,

Newbie here. I am desperately trying to achieve the look that I’ve attached to this post at the bottom. I want my dropdown menu to take up the full width of the browser right underneath the nav bar. I also want to position the dropdown links right below their respective parents. First I tried using the dropdown widget. After about an hour of tweaking it and frustration, nothing seemed to work as expected. I emailed support and they pointed me to the forums. I did a search to see if someone had asked a similar question and they did, back in 2014. Avoiding the dropdown widget like the plague seemed to be the answer. Instead, folks recommended using a div or section with interactions.

This gentleman seems to have what I am looking for in his examples

http://sab.webflow.io/menu-in-dropdown-menu

If you scroll down to 100% Width Drop Down List
And click on the dropdown button you will see the menu drop below it taking up 100% width. This is exactly what I need with the exact animation.

I tried doing this myself with the interactions so I placed a section underneath the nav and gave it an interaction. It works to some degree but I have NO CLUE how to link the click of the about anchor to trigger the dropdown animation. In the interactions section, there is a click trigger but there isn’t a target section for this click trigger. How do I link the interaction of the dropdown to a designated link in the nav?

I would like a step by step explanation for this if possible. This is too complicated for me. I am not savvy enough to figure this out on my own. I have very limited knowledge of css and html. This is why I chose webflow. However, I am having a really tough time trying to achieve what I want. Any and all guidance on this issue is greatly appreciated.

You can take a look at my preview here
https://preview.webflow.com/preview/mandala-capital?preview=81e7007092ac5d7500c7a85664d0bfce

Here is a screenshot of what I am trying to ultimately achieve.

Home

---

Here is my public share link: LINK
(how to access public share link)

[Waldo (Waldo Broodrÿk)]

Great question @FernDiggidy you’ll need to create a hover or click interaction on your “about” button to affect another element, the other element being your dropdown menu that is full width.

As well as add an initial appearance to your dropdown menu to be up 100px.

So on your about button you add the hover interaction to move the dropdown menu down:

And on your dropdown element here’s an initial appearance:

Then add a hover out style to the dropdown nav:

You should end up with this:

[FernDiggidy (Fernando)]

Waldo,

Thank you kindly for all your steps.

This worked!

[FernDiggidy (Fernando)]

Waldo,

Again thank you for the help.

I have encountered a bug of some sort. For some odd reason, the dropdown menu will only recede back to its initial position if I move the mouse down from the targeted menu. I presume this is because the hover out trigger type is placed on the dropdown menu and not the menu item itself. Is there a workaround for this?

This is not going to bode well with my client and I completely understand. The user is not going to know to move the cursor down in order to make the dropdpwn disappear. If the user hovers over to the left, right or up, then the dropdown stays in it’s place.

Looks like I am stuck once more.

I’ve attached a gif to better explain the situation.

Bug

[FernDiggidy (Fernando)]

Waldo,

Any Chance that you could identify what the issue is with my dropdown “bug?”

[Hamzster (Hamza)]

I have the same issue but with a different application. Having trouble figuring out how to get it to work.