Streaming live at 10am (PST)

Why is my dropdown pushing DIV below it in mobile?


#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

Thanks!
Dom


Here is my public share link:
https://preview.webflow.com/preview/shinobi-ui-v7?preview=d4549b19304d81c94b9198307292ec32

http://shinobi-ui-v7.webflow.io/


#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.


#4

Looks like you already managed to solve it.


#5

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


#6

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