Streaming live at 10am (PST)

FIXED - Mobile Dropdown doesn't push other elemts below

Hey guys, can anyone tell me what I set up wrong in this Navmenu on Tablet and lower?

I have 3 nested Dropdowns and If I try to open the 2 level one… it doesn’t push the other elements below… It just shows the Dropdown List underneath it.

Can anyone help me what I have set up wrong?

My Read-Only Link :
https://preview.webflow.com/preview/egt-bg?utm_medium=preview_link&utm_source=designer&utm_content=egt-bg&preview=ace98ff36330959e1b33571128e3d5c9&mode=preview

Website preview: https://egt-bg.webflow.io/

Thanks a lot for any help!

1 Like

Did you try making the dropdown list position relative and not position absolute?
It usually does the trick

1 Like

Dear @Tomas_Mrazek,

As @pepperclip mentioned, changing the dropdown list position to relative from the default absolute position does the trick, however, I can see you have already changed the positions in your dropdown lists without success as it seems you have not created the nested dropdowns in the correct way.

I have tried building a new nested dropdown list on your existing Nav Menu and it works fine. It pushes the other elements below as required. See screenshot below:

I would suggest that you start from scratch again to make sure you are taking the right steps as follows:

  1. Delete existing dropdowns.

  2. Select your Nav Menu container and add a dropdown element from the “Add Elements” Webflow menu.

  3. Expand the new “Dropdown” element and select the “Dropdown List” element nested within. Make sure that its position is not set to absolute. If it is, change it to static or relative.

  4. Expand the “Dropdown List” element to reveal the 3 “dropdown link” elements. If you intend to add another dropdown level and do not require any links at this level then you can delete these links.

  5. After deleting the links, select the “Dropdown List” element again and while selected, add a new dropdown element from the “Add Elements” Webflow menu. This will be placed where the links originally were located, i.e. nested within the existing dropdown.

  6. Repeat steps 3-5 until you have as many dropdowns as required, and keeping the links at the last level instead of deleting them. You can duplicate the links to have as many menu links as required.

  7. Duplicate any dropdowns you require at each respective dropdown level.

  8. I would suggest to only proceed with styling after you have completed the full dropdown structure in order to ensure that it is working properly first.

I hope this helps. Have a nice day! :smile:

Thanks for this detailed tutorial ! It works fine, but I am just trying to figured out where I did the mistake. Because for me it feels like I did the same way…

Anyways Thanks a lot for help!

1 Like