I want to make my mobile menu into collapsible menu. my store is on Dawn Theme(https://freetrialix.myshopify.com/)
This is now
and I want to make it seem like this.
Please help me.
This is now
and I want to make it seem like this.
Hi @loolakoola
Nice question but this is not simple to archive for that need to change html,css and Js code to make it working for that you need coding knowledge, you can simple get html, css and js code from here
and adjust code in header.liquid section. or hire any expert for that
Best regard
It may be that this requires a reworking of the HTML structure of your menu on mobile and some JavaScript interaction.
You could hire a shopify developer to help you with it!
Hello @loolakoola ,
Go to Themes > Online Store > Click on drop-down menu of Published Theme - Edit Code > in the Assets > find Component-menu-drawer.css and open it.
After that go to the last line of the code press Enter and paste below code -
@media (max-width: 989px){
.js .menu-drawer__navigation .submenu-open{
visibility: visible;
}
.js .menu-drawer__submenu{
position: static;
transform: none !important;
background-color: #f5f5f5;
}
.menu-drawer__close-button{
display: none;
}
}
Your mobile menu will convert into accordion instead of drawer.
3 Likes
JUST AMAZING! I got solved. Thank you so much. I wish you luck for everything. Thank you Sandy.
1 Like
I’m glad to hear that it worked for you. 
Thank you so much for your wishes and blessings. Let me know if you need any further assistance.
Hi sandy again. Thanks for helping me a lot. Based on code you gave me, I tried to edit my menu, but I got stucked.
now I can put several additional menu and edit their style. however, in the screenshot, the Brand should have sub-menus(COLLECTION NEWS ABOUT CONTACT) and arrow like ‘BY ITEM’ or ‘BY SEASON’. so I put code below at component-menu-drawer.css but it doesn’t work. can you tell me what should I do? (the handle of the menu is ‘brand’)
@media (max-width: 989px){
.js .brand__navigation .submenu-open{
visibility: visible;
}
.js .brand__submenu{
position: static;
transform: none !important;
background-color: #f5f5f5;
}
.brand__close-button{
display: none;
}
}
Thanks, it worked!
This is great!! Thankyou Sandeep. I have two questions:
Is there a way to apply it to desktop drawer menu as well?;
How can I get it to open the sub-menu on hover as well as click on desktop?
Thank you so much!
1 Like
Hi @saim007 ,
It’s been a while since you offered the solution but I have hopes that you can help me too?
We are using Aurora theme and I would like to avoid our mega menu collapsing on mobile, any suggestions on how to solve the problem?
thanks!
1 Like
Hi @Adoug
Can you please share screenshot or explain in details what is showing and what you are expecting?
Thanks
@saim007 of course!
So currently, Aurora, our Shopify theme by default collapses sub-menus on mobile.
You can see on the desktop mega-menu we have e.g. TRENDING which has 2 sub-categories (Categories & Shop by Collection) and they have sub-categories too.
I’d like that on mobile they wouldn’t collapse, I am attaching screenshots.
Is it possible that when we click TRENDING, the sub-categories Categories & Shop by Collection would be expanded and would show what’s inside. (basically to remove the need for the 3rd click)
Example here:
thank you!
1 Like
@Adoug Thank you for the detailed explanation. For fixing the issue required store credential and site URL.
Thanks
@saim007 hey! it’s for https://nomoreaccessories.com however, on the live theme i’m using a different menu (dropdown instead of mega menu option on desktop) however, the mobile is set to use a drawer menu as a default.
Hi @Adoug The menu you mentioned is not showing in the mobile view, like the one you showed in the screenshot. Without it looking like that, I can’t proceed further. Also, this can’t be fixed from the front-end only — it will require custom coding. For that, I’ll need store access. Thanks