How to add a separator line in header (Dawn)

[manbru]

Hey,

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

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

thanks for help!

[Moeed · Accepted solution]

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 </body> tag

<style>
.header {
    max-width: 100% !important;
}
nav.header__inline-menu {
    padding-top: 5px !important;
    border-top: solid 1px #00000063;
}
h1.header__heading {
    margin-bottom: 10px !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Rahul_dhiman]

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

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

[parth_ghelani]

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

[niraj_patel]

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 </body> on theme.liquid
<style>
nav.header__inline-menu {
border-top: 1px solid #000 !important;
}
</style>

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