How can I set menu drawer for second-menu? (Dawn)

Store Design
,

Topic summary

A user is trying to implement a collapsible submenu for a “BRAND” section in their mobile menu drawer on the Dawn Shopify theme.

Currently, the BRAND section appears as a menu title without the arrow icon that other sections (like “BY ITEM” or “BY SEASON”) have to indicate expandable submenus.

Attempted Solution:
The user added CSS code to component-menu-drawer.css to control submenu visibility and positioning, but it didn’t work.

Response Provided:
A support team member suggested:

  • Locating the BRAND menu code in component-menu-drawer.css
  • Adding an HTML entity code (→) to create a right-pointing arrow icon
  • Optionally adding redirect functionality to a BRAND page

Current Issue:
The user clarified their second-menu code is actually in header.liquid (not the CSS file), making the original guidance unclear. They’ve requested revised instructions that account for this different code location.

The discussion remains unresolved, awaiting further technical guidance specific to their header.liquid implementation.

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

loolakoola_0-1682645903032.png
loolakoola_0-1682645903032.png1080×2172 164 KB

This is my mobile version menu drawer. The SHOP and CUSTOMER is added menu title but the red circled ‘BRAND’ is an added menu section but I made it just seem like title, so it supposed to have an arrow to open sub-menu like ‘BY ITEM’ or ‘BY SEASON’ on screenshot. I put code below at the bottom of component-menu-drawer.css but it doesn’t work. Could you help me please?

@media (max-width: 989px){
.js .brand__navigation .submenu-open{
visibility: visible;
}
.js .brand__submenu{
position: static;
transform: none !important;
background-color: #f5f5f5;
}
.brand__close-button{
display: none;
}
}

2

Hello @loolakoola ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → component-menu-drawer.css → find the code for the added menu “BRAND” (it may looks similar to this):

- {{ section.settings.title }}

To add an arrow icon, you can use an HTML entity code for the right-pointing arrow (→). Replace the existing code with the following code:

- {{ section.settings.title }} →

Save and preview

You can add code to redirect customers to the BRAND page by using code like this

- {{ section.settings.title }} →

Hope this can help. Let us know if you need any further supports

Ali Reviews team.

3

the code to add second-menu is at below and I put it on header.liquid. So I got confused at following your answer. could you try it again please?