Drawer menu submenu design (Dawn Theme)

[NaomiNN]

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

[TothDigital · Accepted solution]

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: 

<script>
document.addEventListener('DOMContentLoaded', function() {
  var menu = document.querySelector('ul.menu-drawer__menu');
  var detailsItems = menu.querySelectorAll('details');

  function handleItemClick(event) {
    var clickedItem = event.target;
    
    detailsItems.forEach(function(item) {
      if (item !== clickedItem) {
        item.removeAttribute('open');
      }
    });
  }

  detailsItems.forEach(function(item) {
    item.addEventListener('click', handleItemClick);
  });
});
</script>

[NaomiNN]

 

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 ?

[TothDigital]

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

[NaomiNN]

To move the pink area up, please.

[TothDigital]

Add this to your css: 

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

[NaomiNN]

Hello @TothDigital 

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

 

[TothDigital]

Try this 

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

[Sandeep19687]

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

[TothDigital]

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? 

[Sandeep19687]

www.kaleidokloset.com