Adding separator/divider lines between specific links/menu items in drawer/hamburger menu using dawn

Store Design

Topic summary

Goal: add divider lines between specific links in the Dawn theme’s drawer (hamburger) menu on mobile and desktop.

Key details:

  • Targeted items: “Prints and Merch”, “Museum and Archive”, and “Russian Recording”. A screenshot and store URL/password were shared. Images are central to understanding placement.
  • One response noted generic CSS would add lines under every item, not selective ones.

Solution provided:

  • Edit Online Store > Themes > Actions > Edit code > Assets (base.css/style.css/theme.css).
  • Add CSS targeting specific link IDs:
    a#HeaderDrawer-prints-and-merch, a#HeaderDrawer-museum-and-archive, a#HeaderDrawer-russian-recording { text-decoration: underline; text-decoration-color: white; }
  • This renders an underline per chosen link, effectively acting as dividers. The original poster confirmed it works.

Follow-up requests:

  • Another user asked for a mobile-only approach, then said they solved it and requested help to split the header menu for laptop/tablet only. Helper asked for a store URL and declined email contact.
  • A final user asked how it was done.

Status:

  • Initial issue resolved with targeted CSS.
  • Later questions (desktop/tablet header menu split, and “how did you do this?”) remain open.

Notes:

  • CSS (Cascading Style Sheets) controls visual styling.
  • Dawn is Shopify’s default theme.
Summarized with AI on December 15. AI used: gpt-5.
1

Hello, I have been learning how to customize my store for the past few weeks and haven’t been able to find a solution for this customization.

I would like to add divider lines between specific menu items in my drawer menu for both mobile and desktop: one below “Prints and Merch”, one below “Museum and Archive”, and one below “Russian Recording” please see attached screenshot for reference

Screenshot 2024-02-05 at 9.35.32 AM.png
Screenshot 2024-02-05 at 9.35.32 AM.png3244×1844 666 KB

thanks in advance

1 Like
2

@SAASMics - css will add line under each and every menu item

3

Hi @SAASMics

Do you want only in specific menus? Would you mind to share your store URL? Thanks!

4

Yes, I would only like divider lines between specific menu items, as shown in the attached screenshot

www.sovietamericanaudiosystems.com

password: lomoaiwatoshiba

thank you!

Screenshot 2024-02-05 at 9.35.32 AM.png
Screenshot 2024-02-05 at 9.35.32 AM.png1196×1139 150 KB

1 Like
5

thanks for the info, check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

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:

a#HeaderDrawer-prints-and-merch, a#HeaderDrawer-museum-and-archive, a#HeaderDrawer-russian-recording {
    text-decoration: underline;
    text-decoration-color: white;
   
}

And save.

Result:

Made4uoRibe_0-1707156884476.png
Made4uoRibe_0-1707156884476.png466×569 61.4 KB

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

6

excellent thank you - a clever and suitable solution indeed.

7

Hiya I to create this for mobile version only and was wondering if you be able to help me

1000110739.jpg
1000110739.jpg965×931 25.5 KB

8

Hi @xxlaurslsxx

Would you mind to share your store URL? Thanks!

9

It’s okay I’ve now done it but I want to spilt my header menu for laptop / tablet version only . Would you know how I could do this.

My email is thecraftyprintfactory@gmail.com if you would like to email me.

Thank you.

10

Hi,

I’m sorry, but I don’t send emails if we don’t have any dealings involved. You can share your store URL, and I’ll provide a solution. Thanks!

11

Hey!
please, tell me, how are you make this?