How can I modify the drawer menu design on Dawn?

[Covenlunatic]

Hello! Right now my store have the arrow drawer menu design pictured here:

I find this a bit hard for customers to easy look at all our categories and want instead this drawer design with a + and - instead of an arrow:

Does anyone know about an easy solution for this look?

Thank you!

[BSS-Commerce]

Hi @Covenlunatic

We’ve carefully checked your website and found your problem quite complicated. So we suggest hiring a developer.

It’s what we can help with an optimal solution. If you need help from our expert, kindly share your request with us via Shopify experts.

We will check it and give you a detailed solution. We’re looking forward to working with you.

[WebDeskSolution]

Hello @Covenlunatic

Please add the following CSS at the bottom of Online Store → Theme → Edit code → Assets → base.css:

.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;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.

[NaomiNN]

Thank you so much it worked for me, you are amazing!