Hi,
I am having a problem with the way the dropdown menu looks on my website only on the homepage. The collections seem to overlap with the menu so it doesn’t show clearly all the sections. In all the other pages the scroll down menu is shown perfectly and all of the things from the page move towards the bottom but only on the home page it gets stuck.
Hi, Francine!
Anders from the Shopify Social Care team here. Hope you’re doing well today!
That certainly is odd that the mobile drop-down menu only overlaps on the homepage but not others. To me, this implies that there might be an issue with some of the custom code work done to your theme, specifically, the ‘theme.template’. Did you hire a designer to make some changes to your theme? If so, I would reach out to them once more to see if they’re able to locate the issue. The other option is to reach out to a Shopify Design Expert, however, it can be tough to work with another’s code. If possible, I would reach out to your original designer.
I apologize I’m not more adept in code myself, but perhaps our community might have further insight!
.mobile-nav-wrapper.js-menu–is-open {
display: block;
z-index: 999999;
}
.page-container {
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
position: relative;
overflow: hidden;
z-index: 999999;
}
hey!!! where do i find this code? or where do i have to paste it??? thank you so much for trying to help
Put it at the bottom of your theme.scss.liquid file, he found it by right clicking on your page and inspecting your html. If you’re going to be making code edits i’d suggest messing with that. You can make CSS edits on the fly to see how they will affect your site before you actually put the code in your CSS. The changes wont be saved, so you don’t have to worry about messing anything up. Just right click and inspect.
great i did just that and now I can see the entire menu, thank you so much!!!. I just notice that the slideshow hides the first two items of the collection, instead of the collection also going down and appearing after the slideshow. I don’t know if there is any easy way to make it visible.
here is what I mean
The makers of your theme must have saw this as a feature in the design, the banner has a css style to transform the banner when you open the menu seen here:
transform: translate3d(0px, 494px, 0px);
When the menu is opened on mobile it adds 494px top margin to give it the feeling of sticking to the bottom of the menu which overlaps the first 2 products.
from the banner div “page-container drawer-page-content” if you were to remove the transform feature the banner would not move but it would be ontop of the mobile menu so you would have to add a z-index css style (which essentially moves it behind the mobile menu).
The style of the hero banner div would be:
Remove → transform: translate3d(0px, 494px, 0px);
ADD → z-index: -1;
I have a attached picture for how this would make the mobile viiew look, i hope this helps you.
hi! that seems perfect. I just didn’t understand where i find the transform: translate3d(0px, 494px, 0px); to replace it with z-index: -1;. In which section?
sorry for so many questions but now i noticed that after fixing the mobile problem now the desktop dropsown appears like this :s
Remove z-index from .page-container (theme.scss.css)
add this to the bottom of theme.scss.css:
@media screen and (max-width: 800px) {
.page-container {
transform: none;
z-index: -1;
}
}
great so i fixed the mobile problem! i really appreciate it. Now i just don’t know how to fix the desktop dropdown menu because that happened once i fixed the mobile site problem :s
.page-container { z-index: 1; }
Thank You
??
never mind i got it!! thank you and sorry for the inconvenience!
im glad i could help.
happy holidays
thank you so so much! happy holidays
Hello, so i have the same problem with my mobile menu. It kinda musches togheter with whaterver is on the landing page. I tried finding the things you guys have already discussed but since they have updated the themes i cant seem to find the right folder to put the code in. Are you maybe able to help?
Thank you!
our site : https://minimizet.myshopify.com/
.mobile-nav-wrapper.js-menu–is-open {
display: block;
z-index: 999999;
}
.page-container {
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
position: relative;
overflow: hidden;
z-index: 999999;
}
when i use this code it gives me text on the bottom word for word of the code on the website on mobile and desktop
