Header icons function issues after switching to ltr on mobile

Adishtaim · ‎11-13-2023

Hey, maybe someone can help..

I changed the website from rtl to ltr on theme.liquid (<html lang="{{ shop.locale }}" dir="ltr">) and it's all good, except there's an issue on mobile header icons. The menu is on the left but doesn't open when clicking. It opens when I click on the cart icon on the right. The cart icon doesn't open at all. The search icon works regularly. I'm not sure how it happen or how to fix it...

Also on desktop, when hover on the cart icon on the right it shows the box on the left.

Thanks if anyone has an advice.

The url is https://shtaim.store/

BSS-Commerce · ‎11-14-2023

Hi @Adishtaim ,

You can follow this way:

Switching to ltr and find class #theme-ajax-cart.is-mini-cart after that, change the attribute left : 0 to right : 0 and insert the code at the end of styles.scss.css file:

.mobile-menu__toggle-button {
     width: 0px;
}

I hope it will work correctly on your theme @Adishtaim !

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via community@bsscommerce.com

BSS Commerce - Full-service eCommerce Agency

Adishtaim · ‎11-14-2023

Hey, thanks for the advice!

I tried it but unfortunately the menu icon still doesn't response on mobile.. It only works when I change the direction back to rtl. I figured another solution which works for now.

But there's another problem whit the badge on the mini cart icon, it doesn't disappear when the cart is empty. Also I can't remove an item from the mini cart. Any advice on that?

Thanks again for your help!

Header icons function issues after switching to ltr on mobile

Header icons function issues after switching to ltr on mobile

Community Blog Articles