Header icons function issues after switching to ltr on mobile

Adishtaim
Tourist
7 0 0

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/ 

Screen Shot 2023-11-13 at 11.41.32.pngIMG_8156.PNG

 

Replies 2 (2)

BSS-Commerce
Shopify Expert
3477 462 523

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:

view - 2023-11-14T162909.484.png

.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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Adishtaim
Tourist
7 0 0

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!