Issues with Woo Commerce Cart page and menu icon

Hello|
I have some issues, in mobile, with Woo commerce Cart page and the icon in the navigation menu.
The icon in the menu is not centered as the other items, the cart page checkout section is broken.

Please find the screenshots attached

Hi,

I’d like to try checking the cart page by adding a product to cart. But, it seems likely the products are set to private and login required. Can you create a test account for me? Please send it to my email at kharisblank[@]gmail[.]com.

Regards,
Kharis
aThemes Support

I’ve sent you the test account un and pw

Thank you.

I can’t set a password by following the link in the email. Can you please set it up for me?

Regards,
Kharis
aThemes Support

I’ve sent you an email with un and pw. That was the automated one. You should receive it soon. Thank you!

The login credentials you sent are working.

As checked, you would add the below CSS code to your website’s Additional CSS.

    @media only screen and (max-width: 1199px) {
      .main-navigation .header-search-cart .header-cart-link {
        padding-left: 0;
        margin-left: 0;
      }
    }
    .wc-proceed-to-checkout .checkout-button, .wc-proceed-to-checkout .wcppec-checkout-buttons {
    	 width: 100%;
    }
     @media only screen and (max-width: 700px) {
    	 table,
       .shop_table.shop_table_responsive.cart {
    		 display: table !important;
    	}
    }

Regards,
Kharis
aThemes Support

Thank you it worked perfectly!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support

Sure, I’ve answered to an old topic regarding auto animation on hover of menu items, but got no response. Using the code you provided on that topic I have, on mobile, the issue that it works but menu links are not working (click, animate the underline, but doesn’t go anywhere)

Thak you!

I wrote you a reply already in this thread:

Regards,
Kharis
aThemes Support

Yes, sorry I didn’t see the notification.

The video is referring to the normal version, since I removed the code of underlining animation since it wasn’t working. When I add it back it works for the animation but doesn’t send you anywhere when clicking.

This is my screen recording, when you see the item flashing it’s me tapping it: https://drive.google.com/file/d/1-yMTFBgDL4QbeTKnRSx1Bz5G-4iR2ZOF/view?usp=sharing

Hi,

What is the hover effect you would like to add on the menu items on mobile screen? Can you let me know? Perhaps I can try suggesting different code for you.

Regards,
Kharis
aThemes Support

As you can see from the video I’ve already added the animation, the issue is that when you click it doesnt go anywhere (on mobile)

Hi,

Try adding this CSS code to your website’s Additional CSS.

    .main-navigation ul.menu > li > a {
        transition: color 0.1s, background-color 0.1s;
        position: relative;
        z-index: 9999;
        display: block;
        transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
        color: #78A0B4;
    }
    .main-navigation ul.menu > li > a:hover {
        color: #78A0B4;
        text-decoration: none;
    }

    .main-navigation ul.menu > li > a:before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        bottom: -3px;
        left: 0;
        height: 3px;
        width: 100%;
        background-color: #78A0B4;
        transform-origin: right top;
        transform: scale(0, 1);
        transition: color 0.1s,transform 0.2s ease-out;
    }

    .main-navigation ul.menu > li > a:active::before {
        background-color: #000;
    }

    .main-navigation ul.menu > li > a:hover::before, 
    .main-navigation ul.menu > li > a:focus::before {
        transform-origin: left top;
        transform: scale(1, 1);
    }

Regards,
Kharis
aThemes Support

Hello! Thank for your reply. The problem that links don’t work is still there, it has just changed color :slight_smile: