Solved

Shopping cart menu disappears on hover, please help

fizzy1
Excursionist
15 0 4

Hello

I have the Flex theme from Out of the Sandbox, and this has been customised already. I have custom shopping cart, search icons. 

The issue I'm having is that when you hover over the shopping cart icon,  the hover menu disappears before you can make a selection to check out. Is there anyway to fix this please? Is it also possible to make the icons bigger?

shopping cart.jpg

 

My shop is: https://toomey-koko.myshopify.com/

 

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@fizzy1 

Try this css 

 

@media only screen and (min-width: 799px) {
#theme-ajax-cart.is-mini-cart {top: 45%;}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 11 (11)

dmwwebartisan
Shopify Partner
12282 2546 3694

@fizzy1 

Please Go to Online Store->Theme->Edit code then go to assets/styles.scss.liquid ->paste below code at the bottom of the file.

@media only screen and (min-width: 799px) {
.header__icons .icon {height: 2rem; width: 3.2rem}
}

 Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
fizzy1
Excursionist
15 0 4

thank you for your help.

The icons are now increased in size, but the menu icon still disappears when you hover over the shopping cart icon. Is there a fix for this too?

dmwwebartisan
Shopify Partner
12282 2546 3694

@fizzy1 

the menu icon still disappears when you hover over the shopping cart icon. Is there a fix for this too? 

Means?

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
fizzy1
Excursionist
15 0 4
dmwwebartisan
Shopify Partner
12282 2546 3694

@fizzy1 

your store not inspected Please disable security .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
fizzy1
Excursionist
15 0 4

What do you mean? How do I do that?

dmwwebartisan
Shopify Partner
12282 2546 3694

@fizzy1 

Please Go to Online Store->Theme->Edit code then go to assets/styles.scss.liquid ->paste below code at the bottom of the file.

@media only screen and (min-width: 799px) {
#theme-ajax-cart.is-mini-cart {top: 50%;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
fizzy1
Excursionist
15 0 4

That still doesn't work 😞

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@fizzy1 

Try this css 

 

@media only screen and (min-width: 799px) {
#theme-ajax-cart.is-mini-cart {top: 45%;}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
fizzy1
Excursionist
15 0 4

It works now! Thank you so much!

dmwwebartisan
Shopify Partner
12282 2546 3694

@fizzy1 

If helpful then please Like Solution .

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app