How can I design a drawer menu with one sub menu open at a time on Dawn theme?

Hello,

i changed the design of my drawer menu and I would like to know if there is a way to have the sub menu not all opened at the same time. To just open one sub menu at once because when it’s all opened the menu is too long.

The code is used:

.menu-drawer__navigation .submenu-open {
visibility: visible !important;
}
.menu-drawer__inner-submenu > button.menu-drawer__close-button {
display: none;
}
.menu-drawer .menu-drawer__menu li > details > summary.menu-drawer__menu-item {
padding-right: 40px;
}
.menu-drawer__menu li > details > summary:after,
.menu-drawer__menu li > details > summary:before {
content: “+”;
position: absolute;
right: 10px;
top: 12px;
width: 20px;
height: 20px;
line-height: 20px;
font-size: 20px;
text-align: center;
font-weight: 700;
color: #000;
}
.menu-drawer__menu li > details > summary:after {
content: “-”;
visibility: hidden;
}
.menu-drawer .menu-drawer__menu li > details[open] > summary.menu-drawer__menu-item:after {
visibility: visible;
}
.menu-drawer .menu-drawer__menu li > details[open] > summary.menu-drawer__menu-item:before {
visibility: hidden;
}
.js .menu-drawer__submenu{
position: static !important;
transform: none !important;
}
.menu-drawer__navigation .submenu-open {
visibility: visible !important;
}
.menu-drawer__navigation{
overflow-y: auto;
}
.menu-drawer .menu-drawer__menu li > details > summary.menu-drawer__menu-item svg.icon {
display: none;
}

Store url :https://prettypleaseatelier.com

password: Naomi

Thank you for your help

I’ve similarly modified my mobile drawer menu. Here’s a JS solution that works for me…

Open your theme files, find header-drawer.liquid and add this to the bottom of the file:


Hello @TothDigital

Thank you so much for your help it worked :blush:

Do you have a solution to reduce the white space in the drawer menu on mobile ?

Do you want your menu items to take up that space? Or do you just want to move the pink login area up?

To move the pink area up, please.

Hi @NaomiNN @TothDigital - I tried to implement the code that you guys have suggested. It worked but there is some weird back button that I am seeing in my mobile drawer. Video attached. Could you please let me know, how I can remove the back button? Because I believe it is not required since now there is “+” and “-” buttons to open and close the menu

This is because the code only works on menus with one level of nested submenus. It needs to be modified to accommodate more 2nd level submenus.

What is your stores URL?

www.kaleidokloset.com

Add this to your css:

.menu-drawer__navigation-container {
height: auto !important;
}

Hello @TothDigital

thank you it worked but below the login icon it’s white, do you have another code please ?

Try this

@media (max-width: 767px){
#menu-drawer, .menu-drawer__inner-container, .menu-drawer__navigation-container {
height: auto !important; 
}
}

S/O you! Used this code on another issue I was having and it worked PERFECT!

HI @NaomiNN

I want to take out the submenu only in mobile, how can I do it? I want the submenu to be only on mobile

Thanks