Streaming live at 10am (PST)

Dropdown not appearing in Firefox

I’ve just noticed that a dropdown menu disappears completely when viewed in Firefox. Its a standard dropdown that’s set to hide on all breakpoints but Desktop. It appears fine in any other browser. Its the ‘About Us’ button on this site:

Share link: Webflow - Fixfire

Set the dropdown (.dropdown-4) to “left: 0” and the parent div (._1200px-container-top-menu) to “position: relative”.
Should fix your issue in this case.

1 Like

Thank you so much! All sorted. Do you know why this happens please? I always try to understand the issue so I have an informed approach next time. Is it a bug with WF or simply a case of how Firefox renders the site?

You are welcome.

No, this is not a bug with Webflow or a Firefox issue.
Actually it is the way you wrote your CSS, which is not “best practice”.
Some browsers might handle things different that others, if it is not clear enough, what to do (from browsers point of view).

With this fix, you should be safe regarding cross-browser compatibility.

It is always good to understand, why things happen. From this you will learn and do better the next time.

So I will go into detail a little bit to give you some hints.

For some reasons, you set your dropdown to position absolute.
By doing that, you withdrew the element of the row and did compensate that with a “fix” of the following div “” and give it a margin to the left to make space again for your dropdown.

If you want to have a better approach, I would recommend to change the dropdown to position relative again, remove the margin of the do-you-comply class, set the parent div (_1200px-container-top-menu) to display flex and there you go.

You will see, same result, but more clean and if you want to make further changes you won’t have to make one hack after another.

1 Like

Thank you so much for the explanation, its helped me understand the issue and will be a great help in the future too.

Thanks for taking the time to write that!

1 Like