DAWN how to show nested menu/submenu on mobile?

[Florina88]

Hi all,

I am working with the DAWN theme. On mobile, when you open the menu by tapping the burger icon, you get to see only the main menu items, which is fine. It looks like this:

Shop >

Sustainability >

About

News

Then, when you choose one item from the menu, e.g. Shop, you get to see only the next level and have to tap again to get to the next lower level. I would like the 2nd and 3rd levels both showing as a nested menu, like this:

Women’s

Handbags

Accessories

Travel

Men’s

Accessories

Travel

Each line should be klickable, so you get to click “Women’s” to see all women’s products, or “Handbags” to see only women’s handbags. Does anyone know how to achieve this?

Your help is much appreciated!!

[nidhipatel]

Hi @Florina88

In order to show Nested Menu for second level and third level at a same time:

Please add following code in header.liquid file:

  {{ childlink.title | escape }}

  {%- for grandchildlink in childlink.links -%}
  - {{ grandchildlink.title | escape }}
    
  
  {%- endfor -%}

And remove/comment following code from header.liquid file:

{%- comment -%}
  
{%- endcomment -%}

Please refer this for reference:

---

Also, please add following CSS in component-menu-drawer.css file:

.grand_sub_menu .menu-drawer__menu-item{
  background:transparent;
  padding-left:50px;
}

Please refer this for reference:

Happy coding!

[nidhipatel]

Hi @Florina88

Just wondering, Is above solution works for you or not? If you find helpful to resolve your issue then please accept it as solution so it will be helpful for other community members.

Thank you.

[Florina88]

Hi @nidhipatel

it worked - thanks a lot!!

Can you help me style the second and third levels: downsize the font and reduce line distance a little bit? Many thanks!

[Janani]

Hi @nidhipatel ! Can you please suggest the same for Colorblock theme. I couldnt find this code snippet in it. It would be of great help. Thanks in advance.