How can I change the mobile hamburger menu icon from left to right, and menu slide open direction from right to left.
I’ve managed to move the icons using (Display: Flex;) but it changes the header menu when not in mobile view also. Although, menu still opens from left to right.
I want the header menu to only change in mobile view.
Thank you for your time.
Hi,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.
@LitExtension , thank you.
Hi @iwonder ,
Go to Assets > base.css and paste this at the bottom of the file:
@media screen and (max-width: 989px) {
.header {
grid-template-areas: "icons heading left-icon" !important;
}
header-drawer {
justify-self: end !important;
}
.menu-drawer {
left: auto !important;
right: 0 !important;
transform: translate(100%) !important;
}
.no-js details[open]>.menu-drawer,
.js details[open].menu-opening>.menu-drawer,
details[open].menu-opening>.menu-drawer__submenu {
transform: translate(0) !important;
}
.header__icons {
justify-self: start !important;
}
}
Hope it helps!
Amazing! ★★★★★
@LitExtension , Can I have the menu on tablet screen same as on mobile please? I’ve gone down as far as 600 as still doesn’t budge.
Hi @iwonder ,
Please send your site and if your site is password protected, please send me the password. I will check it.
Hi @iwonder ,
I tested it on the iPad Air display and it works fine.
Can you send me the name of the iPad you are testing or the screen size? I will help you check it again.
Samsung Tab S7 @LitExtension , thank you for your time.
Hi @iwonder ,
Can you send me a screenshot? I will help you check it
worked. good solution!
