How do I put 1px border between the header and footer and main body container in 7.1

I'm trying out the new 7.1 at the moment. In 7.0 I had a template that allowed me to add a 1px border line at the bottom of the header and the top of the footer. I'd like to replicate this in 7.1, but I don't see any styling options for that. What custom CSS do I need to add to make that happen?

Add to Home > Design > Custom CSS

/* Add a line to bottom of header */
header#header {
    border-bottom: 1px solid green;
}
/* Add a line to top of footer */
footer#footer-sections {
    border-top: 1px solid green;
}

 Hi @tuanphan, do you know how to make it work on a 'Fixed Position' header with 'Fixed Header Style' set to 'Scroll back'? 

Basically so that it is "glued" to the header,  disappearing together with the header when scrolling down and only re-appearing together with the header when scrolling back upwards.

Thanks in advance!

On 6/6/2020 at 9:47 PM, AlSer said:

 Hi @tuanphan, do you know how to make it work on a 'Fixed Position' header with 'Fixed Header Style' set to 'Scroll back'? 

Basically so that it is "glued" to the header,  disappearing together with the header when scrolling down and only re-appearing together with the header when scrolling back upwards.

Thanks in advance!

Remove this code

header#header {
    border-bottom: 1px solid #e5e5e5;
}

and add

.header-announcement-bar-wrapper {
    border-bottom: 1px solid #e5e5e5;
}

Worked like a charm 🙂 Thanks so much, @tuanphan

@tuanphan How would I add a 1px top border to a specific section on a page? Would I use the data-section-ID?

8 hours ago, SomethingMoreDesign said:

@tuanphan How would I add a 1px top border to a specific section on a page? Would I use the data-section-ID?

try

[data-section-id="enter-id-here"]:after {
	content: "";
	display: block;
	height: 2px;
	width: 100%;
	background: red;
}

Find ID with: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

On 6/9/2020 at 10:41 AM, tuanphan said:

Remove this code

header#header {
    border-bottom: 1px solid #e5e5e5;
}

and add

.header-announcement-bar-wrapper {
    border-bottom: 1px solid #e5e5e5;
}

 

Hi @tuanphan this header code works perfectly for my footer as well - thanks so much!

 Quick question - is there any way I can decrease the width of the line to about 75% of the screen size(about the width of the grid above)? Here's the URL to my website: mikagu.me

Thanks so much!

On 9/8/2021 at 9:09 PM, stawberryey said:

Hi @tuanphan this header code works perfectly for my footer as well - thanks so much!

 Quick question - is there any way I can decrease the width of the line to about 75% of the screen size(about the width of the grid above)? Here's the URL to my website: mikagu.me

 

Thanks so much!

Hi,

Use this new code

header#header:after {
    content: "";
    height: 5px;
    width: 75%;
    display: block;
    background-color: green;
    margin: 0 auto;
}