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

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