adding full width responsive lines in header

Hoping someone can help!

I'm trying to add 3 lines of different weight to the header of my site. I'm using the new squarespace 7.1

I'd like them to appear on mobile view as well.

Screen shot of what i'd like to achieve attached!

You can add 2 lines

3 lines, seems difficult.

Can you share link to your site? I can take a look.

the site isn't finished yet but here's the link!

dinosaur-parakeet-9ws3.squarespace.com

Squarespace 7.1 all uses the same template yeah?

Thanks!

annoyingly though that just gives me two lines and i need to be able to make them different colours!

1 hour ago, hackney_ns said:

Thanks!

annoyingly though that just gives me two lines and i need to be able to make them different colours!

Yeah, found this code

header#header {
    border-bottom: 1px solid white;
}
header#header:after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: red;
    position: absolute;
    bottom: -5px;
}
header#header:before {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: violet;
    position: absolute;
    bottom: -10px;
}

Thanks tuanphan,

Just one line appears with using that!

1 minute ago, hackney_ns said:

Thanks tuanphan,

Just one line appears with using that!

It works here?

how odd!

I placed the code in custom css and here's what i got?

Save the code & view live site

If it stille doesn't work, keep the code & share link again. I will check.

Thanks!

I've done as you said!

Here's a link - https://dinosaur-parakeet-9ws3.squarespace.com/

When i refreshed the page i could seem them flash up but they disappeared and now it's just one line again...

I appreciate your help!

15 minutes ago, hackney_ns said:

Thanks!

I've done as you said!

Here's a link - https://dinosaur-parakeet-9ws3.squarespace.com/

When i refreshed the page i could seem them flash up but they disappeared and now it's just one line again...

I appreciate your help!

Clear your browser cache...

You are an angel!!! I cleared the cache and it's there!

I'm almost there! I tweaked some of the numbers to match with the design i needed to emulate.

But every time i try to change the colour of the top line it disppears? 🤨

2 minutes ago, hackney_ns said:

You are an angel!!! I cleared the cache and it's there!

I'm almost there! I tweaked some of the numbers to match with the design i needed to emulate.

But every time i try to change the colour of the top line it disppears? 🤨

Can you post all code after you changed color? maybe missing character...

this is what i changed it to...

header#header {
    border-bottom: 2px solid white;
}
header#header:after {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    background: #868686;
    position: absolute;
    bottom: -7px;
}
header#header:before {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background: #575756;
    position: absolute;
    bottom: -14px;
}

4 minutes ago, hackney_ns said:

this is what i changed it to...

header#header {
    border-bottom: 2px solid white;
}
header#header:after {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    background: #868686;
    position: absolute;
    bottom: -7px;
}
header#header:before {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background: #575756;
    position: absolute;
    bottom: -14px;
}

I see fine here.

Clear browser cache..

sorry - i forgot to change the top colour!

here's code again:

header#header {
    border-bottom: 2px #b2b2b2;
}
header#header:after {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    background: #868686;
    position: absolute;
    bottom: -7px;
}
header#header:before {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background: #575756;
    position: absolute;
    bottom: -14px;
}

border-bottom: 2px #b2b2b2;

border-bottom: 2px solid #b2b2b2;

border-bottom = border-bottom-width + border-bottom-style + border-bottom-color

BINGO!!!

You're a legend!