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!
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.
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 ?
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.
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.
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?
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.
