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
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
Here is a screenshot of what I am trying to ultimately achieve.