Add separator line in the middle of the header (Dawn theme)

Store Design
, ,
1

Hi! I am currently working on my website in the dawn theme and I want to add a separator line between the logo section and my main menu section in my header. I have tried messing around with borders in the base.css code but cant seem to find a solution.

This is how I want it:

Skärmbild 2023-05-18 162625.png
Skärmbild 2023-05-18 162625.png1920×934 296 KB

At the moment I have a bottom and top border of the header and I want the divider line to match the color and size of those. Also, my header reduces in size when scrolling down so I want the divider line to be attached to the header so it doesn’t mess up when scrolling down.

Here’s my site: https://sunbelezza.myshopify.com/

Anyone have any ideas? Thank you :))

1 Like
2
  1. In the code editor, locate the header.liquid file.
  2. Open the header.liquid file and look for the <header> tag that contains the logo and menu sections.
  3. Add a <div> element right after the logo section, just before the main menu section. For example:

​
1 Like
3

Thank you so much for the reply! I think I managed to follow your instructions, but how to I add the actual divider line in css? I tried this code below in between the section in the theme.liquid file but I cant get it to work:

.divider-line { border-top: 10px solid #bbb }

I have zero experience when it comes to coding so let me know if I am waay out of line here

Edit: Managed to solve it! Thank you very much!

4

I just realized that the divider line only appears on the homescreen. I have managed to get it how I want but if I go to any other page than the homemage the divider line disappears. Do you know why?