Dropdown popup content won't line up to the dropdown button above it - but does so in Designer

Design help General
1

Hey all,

Having a tricky issue with some displaying of dropdown content. Hoping to get some help as we’re not sure what is causing the issue.

If you see at the link below, the MIDDLE links have popups on hover where the content displays to the RIGHT of the dropdown button. They should show right below it. In designer it works just fine and using Left: 50%/Transform -50% right absolute positioned to the Dropdown button.

The RIGHT links display their popup fine.

Any ideas?

https://preview.webflow.com/preview/chr-top-bar?utm_source=chr-top-bar&preview=383ab792d9391a02dbed0fe9220728ee

http://chr-top-bar.webflow.io/

Thanks so much!

edit: Pinging @Waldo - can you go go gadget help on this one? :slight_smile:

2

In not working anywhere (Only in one screen width - like the designer width).

1. Remove this class

Dropdown Container
image
This should be right initial (without any setting)

2. Add new class

new-
set two styles (Not endless styles only two :slight_smile: )

image
image1032×610 30.3 KB

Done

image
image1914×356 19.2 KB

3

Ahh! You found it, thanks! There was also an animation that affects the positioning on display. I had to edit that as well to fix the issue - the popup animation has to be on the Link inside the dropdown box, not the Dropdown element.

This is what was interferring with the position. The Scale in the IX overwrites the transform positioning (left/right) on the container:

transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);

The solution I found isn’t too elegant but it works for the positioning but doesn’t allow for a scale to be applied to it:

 .dropdown-container-new {
     -webkit-transform: translate(-50%,0) !important;
     -ms-transform: translate(-50%,0) !important;
     transform: translate(-50%,0) !important;
 }

So the solution appears that i need to have a Div for the scale and another to contain all the content!

1 Like
5

First the position should work with/without animation.

In your case you create to to to to to to much styles and tricks (For very simple two css lines idea).

The problem was the style of Dropdown Container - You dont need any !important -or- custom code her.

By deafult webflow dropdown is with some animation anyway.