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
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?
Add this to your css:
.menu-drawer__navigation-container {
height: auto !important;
}
NaomiNN
November 5, 2023, 7:09pm
10
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!
FINCAS
May 30, 2025, 4:37pm
13
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