Dawn Mobile Menu

Store Design
,

Topic summary

A user seeks to modify their Dawn theme mobile menu so child items are indented rather than aligned with parent items. They provide screenshots showing the desired layout (indented child items) versus their current setup (all items aligned).

Solution Provided:
A support team member offers CSS code to achieve the indentation:

  • Navigate to Shopify admin → Online Store → Edit code
  • Open the theme.liquid file
  • Add custom CSS above the </head> tag that applies left padding (20px) to submenu items on mobile devices (max-width: 768px)

The solution targets .menu-drawer__submenu child elements specifically to create visual hierarchy. The discussion remains open pending confirmation from the original poster on whether the solution works.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

How can i display my mobile menu like this

Child items are not aligned to top item

TBS2023_0-1739196103866.png
TBS2023_0-1739196103866.png302Ă—494 5.64 KB

www.yogaspirit.mu

at the moment all my items are aligned

TBS2023_1-1739196154451.png
TBS2023_1-1739196154451.png405Ă—425 11.9 KB

1 Like
2

@TBS2023

Can you share store url !

3

Hi @TBS2023

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
@media screen and (max-width: 768px){
.menu-drawer__submenu > .menu-drawer__inner-submenu > ul.menu-drawer__menu.list-menu > li {
    padding-left: 20px;
}
}
{% endstyle %}

DaisyVo_0-1739197256685.png
DaisyVo_0-1739197256685.png351Ă—591 18.8 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like