Streaming live at 10am (PST)

Menu made of multiple dropdowns


#1

Hello everyone,

Im creating a website with multiple dropdowns as menu. The thing is when you click on one of them, all the others are changing their place. Second thing, is there any way to center them so its easy to adjust on tablet/mobile view or do I have to change size/margin/padding manually?

I really hope someone can help me with that, cheers!

https://preview.webflow.com/preview/interacta?preview=4daf82af206a5c8b40f8ae0b97d665db


Here is my public share link: https://preview.webflow.com/preview/interacta?preview=4daf82af206a5c8b40f8ae0b97d665db
(how to access public share link)


#2

I haven't followed your link but when I read that I suspect you've been giving a float property to the Current or Open state of a link item. So when you activate it, it jumps either to the beginning or the end of the list and the previously active one jumps back where it should be... Am I right?

Edit I checked your link, the order thing doesn't happen and the links seem centered... Also there are ways to center your big dropdown.


#3

Thank you for having interest in my issue! I changed them to Block and they arent jumping anymore, the only thing left is to center the big dropdown, should I do it manually or ?


#4

Not necessarily, you can use position:absolute. Remove all position property (put auto) to the parents of the dropdown lists, up to the navbar element. Then give position: relative to navbar and absolute to big menus.

https://v.usetapes.com/moOhWDfvT2

Look closely at the video there are unusual clicks to perform to get to the open state of the menu.


#5

Thank you so much Vincent! :smiley:


#6

Funny thing is I usually do something more complicated. I've tried what I told you by the past with no luck but I could make it work for you. So that's cool, learnt a new trick today.


#8

Im happy for you and sad for myself, another problem popped out. Dropdowns look good in designer and preview mode but when i published it and clicked on dropdown, it has 100% browser wide and some weird positioning. But I found out that if you make the browser smaller so it goes to mobile mode and you click on hamburger menu, then make the browser big again, suddenly dropdowns look all good. What the hell?

Please have a look at interacta.webflow.io


#9

This:

Explanation: we're using position:absoolute for the dropdowns. Now you need to read the following article to undertand why we need top put position:relative on the navbar.

Also you'll have to shift the dropdown a bit down.


#10

You are saving me once again, thank you!


#11

#12

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