Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 11, 2016 at 4:57 am #630379
    Taryn

    Hi!
    A little bit ago, I started this thread (https://kriesi.at/support/topic/cart-on-mobile-menu/), but I’ve now discovered that it actually is not working like I thought.

    On mobile, the cart icon was displaying all the time, even though I have it set to only display when something is added to the cart. I was given this code

    @media only screen and (max-width: 767px) {
.responsive #top .cart_dropdown {
    display: none !important;
}

.responsive #top .cart_dropdown.av-display-cart-on-load {
    display: block !important;
}
}

    This code hides the cart icon on mobile, but as I’m now discovering, it hides it all the time. When something is added to the cart, the icon still doesn’t show up on mobile.

    Any way to get the cart icon to behave correctly on mobile – hidden when nothing in the cart, visible when there is something in the cart?

    Thanks!

    May 12, 2016 at 9:48 am #631242
    Ismael

    Hey Taryn,

    Thank you for using Enfold.

    My bad. Please replace the code with the following:

    @media only screen and (max-width: 767px) {
.responsive #top .cart_dropdown {
    opacity: 0;
}

.responsive #top .cart_dropdown.show_cart {
    opacity: 1;
}
}

    And this code in the functions.php file:

    function add_custom_script(){
?>
<script type="text/javascript">
(function($){
	function a() {
	    $('#top .avia_cart_buttons .button').bind('click', function() {
            var empty = $('.cart_list .empty').length;
		    if(!empty) return;

		    $('.cart_dropdown').addClass('show_cart');
	    });		
	}

	a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    Remove browser cache before testing the page.

    UPDATE: We modified the code a little.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.