Jump to content

adding full width responsive lines in header

Recommended Posts

  • Replies 17
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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...

image.thumb.png.913461cef4aa10ec9b9b63f9ba7ff36a.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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...

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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;
}

Link to comment
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..

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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;
}

Link to comment

border-bottom: 2px #b2b2b2;

border-bottom: 2px solid #b2b2b2;

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.