Shopify themes, liquid, logos, and UX
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!
To learn more visit the Shopify Help Center or the Community Blog.
.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;
}
.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
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.
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.
https://i.imgur.com/OIhjlWS.jpg
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
Thank You
??
never mind i got it!! thank you and sorry for the inconvenience!
im glad i could help.
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/
thank you so so much! happy holidays
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024