change design of menu drawer

Store Design
, ,

Topic summary

Goal: Adjust the Dawn theme’s menu drawer to use smaller text and add thin grey dividers between sections (mobile view), matching a provided example.

Proposed changes:

  • Add custom CSS in Online Store → Theme → Edit code → theme.css or base.css.
  • First pass: apply a box-shadow on each list item (li) within ul.menu-drawer__menu.has-submenu.list-menu to create subtle grey separator lines.
  • Updated solution: replace the initial CSS with a @media (max-width: 767px) block that:
    • Adds padding to menu items for tighter spacing.
    • Keeps the box-shadow-based separators.
    • Reduces font size of links and summary items to 14px for a smaller look.

Evidence/artefacts:

  • Before-and-after screenshots show thinner dividers and reduced text size.

Status/outcome:

  • A concrete CSS-based approach was provided and revised to include font sizing for mobile.
  • No confirmation from the requester yet; solution appears viable but final acceptance is pending.
Summarized with AI on December 12. AI used: gpt-5.
1

hello, i want to change the design of my menu drawer. I would like the text to be smaller, and for there to be thin grey lines between each section:

Screenshot 2024-12-17 at 11.54.45.png
Screenshot 2024-12-17 at 11.54.45.png769×849 13.5 KB

this is my website, and I want it to look something like this:

IMG_3888.jpg
IMG_3888.jpg1170×1833 55.2 KB

where the text is smaller and there are grey lines between each section

my theme is dawn, website url is www.alexandrawestbrook.com

2

Hi @ads18922 ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
ul.menu-drawer__menu.has-submenu.list-menu li {
    box-shadow: 0 3px 2px -2px rgba(0, 0, 0, .2);
}

Result:

websensepro_0-1734437889631.png
websensepro_0-1734437889631.png250×495 10.7 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

3

@ads18922 I forgot to reduce the font size, so please paste this code and remove the one I gave earlier.

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:767px){
ul.menu-drawer__menu.has-submenu.list-menu li {
    padding: 6px 4px;
    box-shadow: 0 3px 2px -2px rgba(0, 0, 0, .2);
}
ul.menu-drawer__menu.has-submenu.list-menu li a, detail {
    font-size: 14px;
}
.menu-drawer summary.menu-drawer__menu-item {
    font-size: 14px;
}
}

Result:

websensepro_0-1734440707035.png
websensepro_0-1734440707035.png258×448 10.4 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!