Solved

How can I eliminate the blank space from my Gecko theme's mega menu?

Daniel19901
Shopify Partner
116 0 15

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

Screenshot 2024-04-13 172853.png

Accepted Solution (1)

diego_ezfy
Shopify Partner
2967 571 899

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

 

View solution in original post

Replies 3 (3)

PageFly-Amelia
Shopify Partner
346 105 150

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!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

Daniel19901
Shopify Partner
116 0 15

@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 ?

Daniel19901_0-1713107832873.png

 

diego_ezfy
Shopify Partner
2967 571 899

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