Jump to content

Adding a multicolored border to bottom of header

Go to solution Solved by tuanphan,

Recommended Posts

Hopefully a super simple solution but I can't seem to find what I'm looking for.

Our brand regularly uses black or white backgrounds with red-white-red stripes to separate sections. I want to add this red-white-red horizontal line to the bottom of our site header and top of our site footer. I've made something that looks right but doesn't function the way I want it to using a separate section.

image.thumb.png.f5ad3f82a9bcc63dbde9b1c2ab15559c.png

Any way I can create this using CSS?

Link to comment
  • 4 weeks later...
  • Solution
On 4/18/2024 at 9:16 AM, pipedreamdesign said:

Sorry to reply so late!

The site is up at
https://primrose-dandelion-zjlf.squarespace.com/

You can use this code to Website > Website Tools > Custom CSS

header#header {
    border-bottom: 5px solid red;
}
header#header:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: red;
}

image.thumb.png.ab53cf3ca5a9397bb963b5e58ab608ab.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

This is what I'm seeing.

Screenshot2024-04-21at9_57_32PM.thumb.png.e9907c274ac417aa0ac79e1007e072d5.png

Perhaps this is an issue of what you see in Preview is different from what we are seeing as an outside viewer.

Try looking at your site in private browsing. How does it look?

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
11 hours ago, pipedreamdesign said:

Sorry @tuanphan, it's not quite what I need yet.

I need the lines under the header to be RED | WHITE | RED but with the code you wrote there is no opaque white, it's transparent:

image.thumb.png.adc7c4b7db18143fcf8a1c7ce742f737.png

Any ideas?

Add this CSS under code I sent

header#header:before {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 0;
    width: 100%;
    height: 7px;
    background-color: #fff;
}

image.thumb.png.33cef8ca3cfef4256b9c799795dc19bc.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.