MarkHazeldine Posted March 11, 2020 Share Posted March 11, 2020 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? Link to comment
tuanphan Posted March 12, 2020 Share Posted March 12, 2020 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; } bbarinaga, sophiaojha, SodaCreekDigital and 2 others 2 3 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
AlSer Posted June 6, 2020 Share Posted June 6, 2020 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! Link to comment
tuanphan Posted June 9, 2020 Share Posted June 9, 2020 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; } MartinSheehanUK 1 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
AlSer Posted June 9, 2020 Share Posted June 9, 2020 (edited) Worked like a charm 🙂 Thanks so much, @tuanphan Edited June 9, 2020 by AlSer Just grammar Link to comment
SomethingMoreDesign Posted October 2, 2020 Share Posted October 2, 2020 @tuanphan How would I add a 1px top border to a specific section on a page? Would I use the data-section-ID? Link to comment
tuanphan Posted October 2, 2020 Share Posted October 2, 2020 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 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
stawberryey Posted September 8, 2021 Share Posted September 8, 2021 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! Link to comment
tuanphan Posted September 12, 2021 Share Posted September 12, 2021 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; } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment