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
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.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
