Streaming live at 10am (PST)

Why is my dropdown pushing DIV below it in mobile?

I want my dropdown menu to open above the DIV below it like in desktop view, but when I switch to mobile view, it pushes the DIV down. Any suggestions to help me stop it from doing this? I thought it may be something todo with the z-index, but it does seem to stop even when I set


Here is my public share link:

Here is the Webflow default style causing this:

@media screen and (max-width: 991px)
.w-nav[data-collapse="medium"] .w-dropdown-list {
    position: static;

What the above does is, any dropdown component (.w-dropdown-list) inside a nav (.w-nav), that has “Tablet and below” selected ([data-collapse="medium"]) here,

will push everything down on tablet or smaller devices (@media screen and (max-width: 991px)).

Either avoid using the Webflow dropdown for this (create your own using interactions), OR,

Do not use dropdown directly inside the nav component, OR,

Paste this in Site Settings > Custom Code > Header Code and re-publish:

@media screen and (max-width: 991px) {
    .w-nav[data-collapse="medium"] .w-dropdown-list {
        position: absolute;

Thank you @samliew! It worked. Once last thing, do you know why I am unable move the dropdown, even thou I gave it a position? Again, I am able to move it in desktop view but not mobile.

Looks like you already managed to solve it.

Hey @samliew! It did work. Thank you again for your help!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.