Double Line Bottom Boarder Code Required

I want to put two horizontal lines on top of each other on my site nav. At the moment, I have one bottom border on the Navigation, and I want to add another line a little above it to create a stacked-line look. 

I have attached an image of what I'm working with and an image of how I want it to look. I can't figure this one out! 

2 hours ago, CharlieThomas said:

I want to put two horizontal lines on top of each other on my site nav. At the moment, I have one bottom border on the Navigation, and I want to add another line a little above it to create a stacked-line look. 

I have attached an image of what I'm working with and an image of how I want it to look. I can't figure this one out! 

Can you share your URL so I can check it more easily?

Hey, Yes of course it is https://wendly.squarespace.com/ Only just started working on it so it's a bit of a wild mess. 

On 8/20/2024 at 12:22 AM, CharlieThomas said:

Hey, Yes of course it is https://wendly.squarespace.com/ Only just started working on it so it's a bit of a wild mess. 

You can use this to Custom CSS box

header#header {
    border-bottom: 1px solid #000;
    padding-bottom: 2px !important;
}

On 8/19/2024 at 2:07 PM, CharlieThomas said:

I want to put two horizontal lines on top of each other on my site nav. At the moment, I have one bottom border on the Navigation, and I want to add another line a little above it to create a stacked-line look. 

This is an interesting one. 

It doesn't seem easy to override the Squarespace border-width CSS rule. So here is what I have for you.

    1. Add this code to your Custom CSS

This will set the border to using a double line instead of a single line.

/* Set the header border to double line (instead of solid/single line) */
.header .header-announcement-bar-wrapper .header-border {
  border-style: double!important;
}

   2. In your Squarespace settings, Edit Site Header > Edit Design > under Design tab, Border:

• Thickness, click on the three dots > change to 3px
• Position: bottom (this should already be set)

Changing the thickness to 3px sets the border-width to 3px, which allows for the double lines to be shown.

Let me know how it goes!

18 hours ago, melody495 said:

This is an interesting one. 

It doesn't seem easy to override the Squarespace border-width CSS rule. So here is what I have for you.

    1. Add this code to your Custom CSS

This will set the border to using a double line instead of a single line.

/* Set the header border to double line (instead of solid/single line) */
.header .header-announcement-bar-wrapper .header-border {
  border-style: double!important;
}

   2. In your Squarespace settings, Edit Site Header > Edit Design > under Design tab, Border:

• Thickness, click on the three dots > change to 3px
• Position: bottom (this should already be set)

Changing the thickness to 3px sets the border-width to 3px, which allows for the double lines to be shown.

Let me know how it goes!

You are a total hero! It worked! Thank you! I gather that the only way to display the line is to change the line weight, so there is no way to keep the line weight the same but increase the spacing between the two lines. I can't work out if visually they look too close together, but I think they give the site something extra. I would love to know your thoughts. wendly.co.uk Thanks again, you're amazing. 

7 hours ago, CharlieThomas said:

I gather that the only way to display the line is to change the line weight, so there is no way to keep the line weight the same but increase the spacing between the two lines.

Not with using border: double.

If you want more control of the second line, you can try tuanphan's code above. Does that work better?