Nav bar dropdown alignment weird behavior

Hi there,

I’m having some trouble getting the dropdowns in my nav bar to align properly - I had to give each dropdown list a different margin on top, which is also a lot more than what the height of my nav bar actually is.

Here’s the read-only link to our project: https://preview.webflow.com/preview/citizenlab?utm_medium=preview_link&utm_source=designer&utm_content=citizenlab&preview=4d141d2a07c730d999e3231f210e5849&mode=preview

Thanks for the help!

Hi could you tell me more about actually what you are trying to achieve. I see your top margin on the dropdown menus is huge. Can you not just adjust this to where you want it?

By selecting the dropdown toggle class then ‘open menu’ in element settings and then ‘dropdown list’ element. Once this is selected adjust the margin to the correct position.

Remove the margin, set position of top: 0 (or whatever you want), since you work with an element that has an absolute position.
This will do the trick.

Hi Greg, thanks for reaching out. I need the huge margins for the nav bar to show properly on our live site (www.citizenlab.co). The weird thing is (to me), that 1) I need these huge margins instead of the exact height of the nav bar & 2), that the different dropdowns need different margins…

I assume you want all dropdowns to display like the ‘about’ link?

Hey Marius, that doesn’t seem to do it…

Yes, exactly. If I watch the WebFlow tutorial, it just aligns perfectly automatically, but that doesn’t seem to be the case for my project…

Well, in Chrome it wasn’t working, in Safari it does. All very strange this… Anyway, thanks Marius! :smiley: