[Resolved] Creating a 100% Width Dropdown

Design help Animations & Interactions
1

I’m currently trying to make a 100% width dropdown, I’ve read on the forums about creating a dropdown of this style and found it is near impossible to do it with webflow’s dropdown widget.

So what I’ve currently done is creating a nav-link which has an interaction on it when hovering over to ‘display:block’ on the ‘menu’ element.

It’s working perfectly, BUT when I try to actually hover over the dropdown, it goes straight back to ‘display:none’ because obviously I’m no longer hovering over the nav-link.

Can anyone help me with this problem?

@Waldo

2

Hi @Papasmurfo Welcome to the community! :smiley:

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:

1 Like
3

Hi @PixelGeek

Here’s an update in what I’m trying to accomplish.

  • When you hover a nav-item it opens a 100% width menu
  • When you try to hover within the menu, it closes due to a problem with the interaction

As you can see with the gif above, the menu doesn’t stay open when trying to hover within it.

Here’s a weblink for you to test it

http://runway-e24bbc.webflow.io/

4

Put a hover state on the menu itself that does the same thing so it maintains its appearance.

5

Unfortunately that didn’t work, because it displays none before you even get to hover over that element.

I think it may be easier to do this in code?

6

Well, now I’m even more confused. I just saw your link, and it works fine for me.

What browser/OS are you using?

7

It does partially work yes - but when you try and hover over the menu bar to get rid of it it doesn’t go :frowning:

8

So what’s happening is that you NEED to hover into the element for the interaction to work, so say a user is flicking between womens/mens and doesn’t hover over the actual dropdown they will see duplicates.

@PixelGeek @Waldo

9

I guess i’ll work this on out myself :slight_smile:

10

Unfortunately - I’ve had to really hack this together due to Webflow’s restrictions (which really shouldn’t be there!)

So to create a 100% width dropdown here’s what you need to do:

  • Delete Webflow’s ultra-restrictive nav-menu
  • Add a section call it Navbar so you keep your styles (If you already have a navbar made)
  • Create a menu, add your brand image etc.
  • Create a div block called “dropdown-huge” (or whatever you want)
  • Nest your nav-link within it like so:

  • Now create an interaction which is on the Parent in the image it is “nav-dropdown” as you can see on the below image all the interactions are there.

When you hover the “nav-dropdown” make the full width menu “display:block” and when you hover out make it “display:none” and IMPORTANT LIMIT IT TO NESTED ELEMENTS. (Now you can re-use your huge dropdown!)

Documented for free.

Unfortunately I’ve lost a bit of faith in Webflow, they seem to ‘stifle’ the creativity that you have by restricting you at every corner. Hopefully they see this and do a bit more ‘deepdive’ videos for users instead of just basic ‘Inserting a menu’.

11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.