Mobile - cart icon issue with chrome (enfold 4.2.6) - Support

hi guys

i just updated today and i saw that on mobile the cart icon is not clickable anymore. can i fix that?

the second thing i saw that on my chrome mobile browser the cart icon is also not in the correct place. on the firefox mobile browser it looks good.
see screenshots:
https://imgur.com/a/9lu00

thank you!
greetings
richard

April 3, 2018 at 7:07 pm #936724

Basilis

Hey richardhofer83,

Please add


#top #header_main #menu-item-shop .cart_dropdown_link {
z-index: 999 !important;
}

and let us know if it works.

Best regards,
Basilis

April 4, 2018 at 1:00 pm #937110

hi
no it is not working on chrome browser, still looks the same

and the cart is still not clickable (has no link) in mobile version.

what else can you suggest?

EDIT: now it also lookgs wrong on firefox… (that was OK before)

This reply was modified 6 years, 7 months ago by richardhofer83.

April 4, 2018 at 3:16 pm #937208

Victoria

Hi richardhofer83,

Can you disable caching and minification for now?

Best regards,
Victoria

April 5, 2018 at 9:07 am #937560

ok i disabled caching

April 5, 2018 at 1:08 pm #937698

Victoria

Hi richardhofer83,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css



@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .responsive #top #menu-item-shop.cart_dropdown {
    top: 40px;
  }
   #top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a,
   #top #header_main #menu-item-shop .cart_dropdown_link {
     height: 80px !important;
     line-height: 80px !important;
   }
}
@media only screen and (max-width: 767px) {
  .responsive #top #menu-item-shop.cart_dropdown {
    top: 32px;
    margin-right: -22px;
  }
  .responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
    right: 45px;
  }
  #top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a,
   #top #header_main #menu-item-shop .cart_dropdown_link {
     height: 80px !important;
     line-height: 80px !important;
   }
}

If you need further assistance please let us know.

Best regards,
Victoria

April 5, 2018 at 2:43 pm #937765

thank you victoria, works great!

one issue is left though: the cart in mobile browsing is not clickable. can i fix that? or was it never clickable?

April 6, 2018 at 7:14 am #938046

Rikard

Keymaster

Hi,

I’m not sure why the cart is covered by something, but it is. You can try to move it a bit to the right by using the CSS:

@media only screen and (max-width: 767px) {
#menu-item-shop.cart_dropdown {
    right: -50px;
}
}

Best regards,
Rikard

April 6, 2018 at 10:29 am #938164

hello rikard,

thats not working, i am sorry, whats covering it up?

April 7, 2018 at 6:10 am #938495

Rikard

Keymaster

Hi,

The CSS I posted should work, I just verified that it does. It seems like you have minification/caching active though, that’s not a very good idea to have when you are working on the site. Could you try to clear and deactivate that until you get your problems resolved please?

Best regards,
Rikard

April 12, 2018 at 2:43 pm #940984

hi,
i deactivated caching

the cart is still not clickable but the area right next to it (right side)
is it possible to make the cart directly clickable?

thank you!

This reply was modified 6 years, 7 months ago by richardhofer83.

April 16, 2018 at 5:08 am #942414

Ismael

Moderator

Hi,

Increase the stack order of the cart container. Please use the following css codes.

@media only screen and (max-width: 767px) {
    .responsive.html_bottom_nav_header #top #menu-item-shop.cart_dropdown {
        position: absolute;
        right: 0;
    }
}

Best regards,
Ismael

April 18, 2018 at 4:29 pm #943658

hello thank you for the reply,

the cart is still not directly clickable… only the area right next to it. you can try it now

look at all the quick css i got from this post:


@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .responsive #top #menu-item-shop.cart_dropdown {
    top: 40px;
  }
   #top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a,
   #top #header_main #menu-item-shop .cart_dropdown_link {
     height: 80px !important;
     line-height: 80px !important;
   }
}
@media only screen and (max-width: 767px) {
  .responsive #top #menu-item-shop.cart_dropdown {
    top: 32px;
    margin-right: -22px;
  }
  .responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
    right: 45px;
  }
  #top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a,
   #top #header_main #menu-item-shop .cart_dropdown_link {
     height: 80px !important;
     line-height: 80px !important;
   }
}

@media only screen and (max-width: 767px) {
#menu-item-shop.cart_dropdown {
    right: -50px;
}
}

@media only screen and (max-width: 767px) {
    .responsive.html_bottom_nav_header #top #menu-item-shop.cart_dropdown {
        position: absolute;
        right: 25;
    }
}

April 20, 2018 at 7:10 pm #944728

Nikko

Hi richardhofer83,

Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

@media only screen and (max-width: 767px) {
  .responsive #top #header .cart_dropdown {
    z-index: 999 !important;
  }
}

Just a tip, you can group codes into the media query so for example, you can combine the css codes we gave you for example this code:

@media only screen and (max-width: 767px) {
  .responsive #top #menu-item-shop.cart_dropdown {
    top: 32px;
    margin-right: -22px;
  }
  .responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
    right: 45px;
  }
  #top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a,
   #top #header_main #menu-item-shop .cart_dropdown_link {
     height: 80px !important;
     line-height: 80px !important;
   }
}

@media only screen and (max-width: 767px) {
#menu-item-shop.cart_dropdown {
    right: -50px;
}
}

@media only screen and (max-width: 767px) {
    .responsive.html_bottom_nav_header #top #menu-item-shop.cart_dropdown {
        position: absolute;
        right: 25;
    }
}

can be changed to:

@media only screen and (max-width: 767px) {
  .responsive #top #menu-item-shop.cart_dropdown {
    top: 32px;
    margin-right: -22px;
    position: absolute;
    right: 25;
  }

  .responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
    right: 45px;
  }

  #top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a,
  #top #header_main #menu-item-shop .cart_dropdown_link {
    height: 80px !important;
    line-height: 80px !important;
  }
}

Hope this helps :)

Best regards,
Nikko

April 24, 2018 at 9:42 am #945777

thank you that works now!
topic can be closed :)

April 24, 2018 at 10:23 am #945808

Nikko