Why is my dropdown pushing DIV below it in mobile?

Design help General
1

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

917×630 47.4 KB

Thanks!
Dom

Here is my public share link:

2

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:

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

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.

1212×723 110 KB

4

Looks like you already managed to solve it.

5

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