how to add separator lines to mobile menu dawn theme

Store Design

Topic summary

A user seeks to customize the Dawn themeā€™s mobile menu by adding separator lines between menu items and repositioning the navigation arrows to match a reference design. Two comparison images illustrate the current menu versus the desired appearance.

Solution Provided:

  • Navigate to Shopify admin ā†’ Online Store ā†’ Themes ā†’ Actions ā†’ Edit code
  • Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add CSS code to:
    • Insert horizontal border lines between menu items
    • Add a bottom border to the last menu item
    • Reposition and flip the arrow icons to the left side

Status: The solution includes specific CSS code and a result screenshot demonstrating the implementation. The issue appears resolved, with the solution provider requesting acknowledgment through likes and marking the answer as solved.

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

hi!

how can I add separator lines to mobile menu dawn theme? adding a pic of the current menu and the wanted change.

also, how can i swich the arrows to be like the other menu.

thanks in advance.

my menu-

,

my menu
my menu1179Ɨ2556 164 KB

the other menu-

0ther menu
0ther menu1179Ɨ2556 196 KB

2

@Anonymous_d65591fabfe73ef1cdbdaa0a1489d355

Hi , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

Hi @Anonymous_d65591fabfe73ef1cdbdaa0a1489d355

Try this one.

  1. From your Shopify admin dashboard, click on ā€œOnline Storeā€ and then ā€œThemesā€.
  2. Find the theme that you want to edit and click on ā€œActionsā€ and then ā€œEdit codeā€.
  3. In the ā€œAssetsā€ folder, click on ā€œbase.css, style.css or theme.cssā€ file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.menu-drawer__menu-item {
    border-top: 1px solid black;
}
.menu-drawer__menu li:last-child {
    border-bottom: 1px solid black;
}

.menu-drawer__menu-item > .icon-arrow {
    left: 0;
    right: 90%;
    transform: scaleX(-1);
}
  • And Save.
  • Result:

Made4uoRibe_0-1739896894116.png
Made4uoRibe_0-1739896894116.png415Ɨ689 19.5 KB

Please donā€™t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
4

Welcome! Would you mind hitting ā€˜likeā€™ as well? Thanks!