I am losing my mind trying to understand why the alignment of the dropdown menu in design does not match the live site. I have tried everything but it is still misaligned. My goal is to simply left align or center the dropdown menu with the item in the navigation. Any help would be appreciated! Thank you.
What it looks like in design:
What it looks like live:
Here is my site Read-Only: Webflow - Qanapi
hello,
I think I found the problem:
and remove that transform from this class “Navbar Dropdown List 2”
and give it position left: 0 and top: 0
check this and let me know if you need any help for that animation
Hey there,
I think you tried to fix the problem by doing several things, and that made it even more complex to fix.
The issue here is something fundamental to CSS + HTML. The element containing the pop-up ‘Navbar dropdown list 2’ is set with position: absolute, and it is relative to the body, which is the entire page body. This is why the pop-up is positioned too far to the left because it’s taking the width of the body.
Solution:
→ Add a div that contains the element ‘Navbar Dropdown links…’
→ Set this new div to position: relative
→ Set the element ‘Navbar dropdown list 2’ to position: static
→ Finally, set the element ‘Navbar Dropdown Links …’ to position: absolute
And that’s it, this is the correct and clean way to do it. But keep in mind that the modifications you made introduced more problems.
no navbar Dropdown is relative to the accordion
in one of webflow university videos
they mentioned that:
It is written here that it is related to the body
But it is actually related to the accordion
the problem with this project is inappropriate transforms, although your solution is also correct
But it doesn’t solve the root of the problem that is wrong transforms
Share the link to that video, so I can believe you.
If Webflow says something, but shows another thing on the screen, then it looks unprofessional, so I don’t believe so.
There are multiple ways to solve this, however if what I did with position: relative and position: absolute, then I prefer to do the right and professional way, or read documentation of MDN to understand about position.
