Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi Everyone,
I was wondering if I can get some help with the mobile nav wrapper and header. I'm working on a site that was previously built by another developer so I'm unsure if these are theme issues or potential user changes from the previous developer. Any help is welcome!
Firstly, here is a picture of whats happening right now.
So There's a couple of things that are wrong and I'm not sure on how to fix it.
1. Each sublink container is auto expanded upon opening of mobile nav
Each .navigation__sublinks-container automatically opens when the mobile nav is active which is not the behavior we want for user experience. Also despite each having display: block set, each container overlaps with the other .navigation__sublinks-containers as well as the parent navigation__links. Is there a way to having each .navigation__sublinks-container only expand upon click of the parent .navigation__link button and populate the .navigation__sublinks-container directly below the parent?
2. The sublink menu upon expansion is transparent making it hard to read.
As shown in the image above, I have the background color set for each container to background-color: #f4f1ec. However, it's still transparent and therefore makes the other content unreadable. I've tried changing the z-index to 2 or 999 with no luck. Any ideas how to fix this?
3. The first sublink menu upon expansion cuts off content that should be included.
The shop dropdown has two subcategories that are cut off when expanded. See below for existing issue versus what should be seen. I assumed this was due to min-height issues but adjusting this value did not correct the problem.
Thanks in advance! Please let me know if I should send any supporting code or my site URL.
Solved! Go to the solution
This is an accepted solution.
Hi @camilllebrown,
Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
@media only screen and (max-width: 925px) {
.navigation__sublinks-container {
display: block;
position: relative;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
.navigation__has-sublinks--collapsed .navigation__sublinks-container {
display: none;
}
.navigation__sublinks {
text-align: center !important;
}
}
Hope it helps!
Hi @camilllebrown,
Please send your site and if your site is password protected, please send me the password. I will check it.
Hi @LitExtension ! Thank you for taking a look. Here is the site: https://overnight-bty.myshopify.com/
It should not be password protected but if you happen to run into an access issue, try this password: Overnightbty2020!
This is an accepted solution.
Hi @camilllebrown,
Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
@media only screen and (max-width: 925px) {
.navigation__sublinks-container {
display: block;
position: relative;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
.navigation__has-sublinks--collapsed .navigation__sublinks-container {
display: none;
}
.navigation__sublinks {
text-align: center !important;
}
}
Hope it helps!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025