Changing Dawn header menu display on mobile

Store Design
,

Topic summary

A user wants to modify the Dawn theme’s mobile menu behavior so that submenu items appear directly under the ‘Shop’ section with a downward-pointing caret, rather than opening in a separate view (as shown in attached screenshots).

Proposed Solution:
Another user provided CSS code to be inserted before the </body> tag in theme.liquid, which would make submenus unfold inline.

Issue with Solution:
While the code successfully created the unfolding menu effect, it caused unintended side effects:

  • Changed font types and sizes throughout the entire store
  • Altered page layouts (e.g., landing page now has white gaps on both sides)

Current Status:
The original poster is seeking a modified version of the code that achieves the desired menu behavior without affecting other store elements. The discussion remains open with no resolution yet.

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

Hello,

The default display of the mobile menu in Dawn theme requires the user to press the arrow in order to access submenu sections and opens up a separate view to view those sections as per screenshots below:

IMG_3286.jpg
IMG_3286.jpg1170×2532 85.3 KB

IMG_3287.jpg
IMG_3287.jpg1170×2532 84.5 KB

I want the ‘Shop’ menu section to have a downward pointing caret symbol and the submenu sections to open up right under the ‘Shop’ title on the main menu page, rather than opening on a separate screen.

I don’t want any changes to the way the menu is displayed on desktop.

Is anyone able to please support?

Thanks a lot,

Ruta

2

@rutadrungilaite

yes it can be done refer to the code below please put the code inside the theme.liquid file before the tags

.js .menu-drawer__navigation .submenu-open {

  visibility: visible !important;

}

.js .menu-drawer__submenu {

  position: static !important;

  visibility: visible !important;

  transform: translate(0) !important;

}

body .menu-drawer__close-button {

  display: none;

}

thanks

3

Hello,

Thanks a lot for your reply.

The code did create an unfolding menu in the mobile view. However, the code also seems to have changed the font type and font sizes all across my store as well as changing the way the pages are displayed e.g. the landing page now has white gaps on both sides.

Is there a way to modify the code so that all other elements in my store are not impacted?

Screenshot 2024-04-23 at 17.57.35.jpg
Screenshot 2024-04-23 at 17.57.35.jpg786×1320 39.6 KB

Screenshot 2024-04-23 at 17.57.56.jpg
Screenshot 2024-04-23 at 17.57.56.jpg786×1320 101 KB

Screenshot 2024-04-23 at 17.58.34.jpg
Screenshot 2024-04-23 at 17.58.34.jpg2058×1320 130 KB

Thanks a lot,

Ruta