Shopify themes, liquid, logos, and UX
Hi,
I'm using a theme called Gecko, for some reason there is a lot of black dead space at the edge of my dropdown (shop now) menu (see image). Can anyone share with me a css code that will help me remove it. I can't locate the responsible item.
This is only a preview link. Theme wasn't published yet: https://skm54y59fu676j97-9298968638.shopifypreview.com
Pass: cewclu
Thank you in advance
Solved! Go to the solution
This is an accepted solution.
@Daniel19901,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:
<li-code lang="markup"><style>
@media (min-width: 750px){
[data-header-options*='isSticky'] .t4s-sub-menu > .t4s-container,
[data-header-options*='isSticky'] .t4s-sub-menu > .t4s-container .t4s-row {
height: 75vh !important;
min-height: unset !important;
}
}
</style>
If it helps you please click on the "like" button and mark this answer as a solution!
Thank you.
Kind regards,
Diego
Hello @Daniel19901
This is Amelia at PageFly - Shopify Advanced Page Builder app.
You can try the following steps I have provided to help you solve the problem you are facing:
Step 1: Online Store -> Themes -> Edit Code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>
<style>
.t4s-sub-menu {
max-height: 70vh !important;
}
</style>
Hoping my solution helps you solve your problem.
Best regards,
Amelia | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
➜ Weekly updated Shopify tutorials on YouTube
All features are available from Free plan. Live Chat Support is available 24/7.
@PageFly-Amelia thank you for your reply. I added it to the file (also tried using it afterwards in the css file without <style>, but both didn't work)
Any chance you can try to help again ?
This is an accepted solution.
@Daniel19901,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:
<li-code lang="markup"><style>
@media (min-width: 750px){
[data-header-options*='isSticky'] .t4s-sub-menu > .t4s-container,
[data-header-options*='isSticky'] .t4s-sub-menu > .t4s-container .t4s-row {
height: 75vh !important;
min-height: unset !important;
}
}
</style>
If it helps you please click on the "like" button and mark this answer as a solution!
Thank you.
Kind regards,
Diego
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