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:
https://preview.webflow.com/preview/shinobi-ui-v7?preview=d4549b19304d81c94b9198307292ec32
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>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.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
