How to add a separator line in header (Dawn)

Store Design

Topic summary

A user seeks to add a vertical separator line between menu items in their Shopify Dawn theme header.

Multiple Solutions Provided:

Four different developers offered CSS-based approaches:

  • Solution 1: Add custom CSS via <style> tag in theme.liquid before </body>, targeting the navigation menu with border styling

  • Solution 2: Modify base.css at line 3693, adding a red 2px solid border-top to the header navigation element

  • Solution 3: Insert CSS at the end of base.css using a ::before pseudo-element to create a positioned separator line with customizable height and color

  • Solution 4: Add styling to theme.liquid targeting nav.header__inline-menu with a 1px solid border-top

Implementation Steps:

All solutions follow similar patterns: Access Online Store → Themes → Edit Code, then either modify base.css or theme.liquid files with provided CSS code snippets.

The discussion remains open with no confirmed resolution from the original poster.

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

Hey,

I would like to have a separator line in between the menu in my header.

Skärmavbild 2024-07-23 kl. 09.21.08.png
Skärmavbild 2024-07-23 kl. 09.21.08.png1920×197 82.9 KB

my store: https://r1vex.myshopify.com/

thanks for help!

2

Hey @manbru

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1721719716958.png
Moeed_0-1721719716958.png1886×871 280 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hello @manbru

Go to online store ---------> themes --------------> actions ------> edit code------->base.css -----> line number 3693
search this code

#shopify-section-sections--22029800276294__header>sticky-header>header>nav {
margin-top: 3px;

and replace with this code

#shopify-section-sections--22029800276294__header>sticky-header>header>nav {
margin-top: 3px;
border-top: solid 2px red !important;
}

and the result will be

13.png
13.png1318×919 235 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

4

Hello @manbru

To show the separator line between logo and menu items in your themes, you just need to follow below steps:

  1. go to admin > Online Store > Edit code.

  2. In code directory, find the file named “base.css” and open it.

  3. copy the below mentioned code and paste it at the end of the file.

.header--top-left .header__inline-menu {
  position: relative;
}
.header--top-left .header__inline-menu::before {
	content: '';
	position: absolute;
	height: 1px; /* Change height as per your requirement */
	width: 100%;
	background: #000; /* Change color as per your requirement */
	top: 2px;
	z-index: 99999;
}

4.Don’t forget to save the file after changes.

Hope this solution works best for your requirement.

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Best Regards

Parth ghelani

5

Hello @manbru

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

nav.header__inline-menu { border-top: 1px solid #000 !important; }

techlyser_web_0-1721650785371.png
techlyser_web_0-1721650785371.png1346×102 8.08 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.