Keep cart logo in mobile view

[shinglai]

I want to show the cart at the left of the hamburger menu in mobile view. Guide me. Thanks.

[paul.r]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

[shinglai]

https://e-maheikhol.com

[mldarshana]

Hi There,

Thanks for writing in! Add the following Javascript into your Theme Options > Global JS area and then you can style it accordingly.

jQuery(function() {
  if ($(window).width() < 980) {
    jQuery("#x-nav-wrap-mobile li.x-menu-item-woocommerce .x-btn-navbar-woocommerce").insertBefore( "#x-btn-navbar" );
  }
});

Hope that helps.

[shinglai]

nope it doesnt work. just to make my question more clear. i want to show the cart in the red box.

[ruenel]

Hello There,

"I want to show the cart at the left of the hamburger menu in mobile view. "

• Please understand that this isn’t the default design of the cart in X. Modifying the placement of the cart would lose the styling and could even lead to a some further issues.

If you insert this code the following Javascript into your Theme Options > Global JS area:

jQuery(function($) {
  if ($(window).width() < 980) {
    $("#x-nav-wrap-mobile li.x-menu-item-woocommerce .x-btn-navbar-woocommerce").insertAfter( $('#x-btn-navbar') );
  }
});

You will have this layout:

You will then need this custom css to be able to style it. please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){
 .x-navbar .x-container > .x-btn-navbar-woocommerce {
   float: right;
   margin-top: 20px;
   margin-right: 15px;
   padding: 10px;
   border-radius: 4px;
   box-shadow: inset 0 0 0 transparent, 0 1px 3px rgba(0,0,0,0.15);
   border: solid 1px #e5e5e5;
 }   
}

And the final output should look like this:

Hope this helps.

[shinglai]

It work. Thanks. i made some changes as in, i had turned off the header widget area so it took me some time.

Thanks again.

[ruenel]

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.