melansonmedia Posted March 29, 2018 Share Posted March 29, 2018 (edited) Starting to work on a new website and looking to add some character to the header by placing two solid lines horizontal across the page. I have been able to figure out how to do a single line, by adding the following to the CUSTOM CSS, but nothing I do allows me to have a second line in a different color, which is what I am trying to achieve. I am using the MENTOR template and I'd like to have this to separate the header from the main section of the page in the instance where I might not use a banner image .Header { border-bottom: 5px solid #b0b579;} Edited March 29, 2018 by melansonmedia Initial Revision Link to comment
Mdhanjal Posted March 30, 2018 Share Posted March 30, 2018 share site url? Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com Website:- dhanjalsolution.com Best Hourly Rate :- $15 Per Hour Link to comment
dimsk Posted March 30, 2018 Share Posted March 30, 2018 Hey, You can target the bottom header separately: .Header-inner--bottom { border-bottom: 5px solid red; } .Header { border-bottom: 5px solid #b0b579; } Hope that helps! Link to comment
melansonmedia Posted April 2, 2018 Author Share Posted April 2, 2018 That didn't work, but I had subsequently tried what is below and it works on the homepage, but not on the internal pages. On the internal pages, the header outline (line 3) is not visible, just the border-bottom. Any thoughts as to what might be going on? Here is the site URL, hfprc.squarespace.com still in the early stages of design and layout. Thanks for any insight. 1 .Header { 2 border-bottom: 5px solid #86b2d8; 3 outline: 5px solid #b0b579; 4 } 5 .Footer{ 6 border-top: 5px solid #b0b579; 7 } Link to comment
nataliaswarz Posted October 23, 2020 Share Posted October 23, 2020 is there a way to change the color of this line on one page only? www.hotel-weekend.com Link to comment
tuanphan Posted October 25, 2020 Share Posted October 25, 2020 On 10/24/2020 at 6:00 AM, nataliaswarz said: is there a way to change the color of this line on one page only? www.hotel-weekend.com Add to Page Settings > Advanced > Header <style> header.Header { border-color: white !important; } </style> 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
nataliaswarz Posted October 26, 2020 Share Posted October 26, 2020 Beautiful thank you @tuanphan! Link to comment
C-bear Posted October 27, 2022 Share Posted October 27, 2022 Hey I would love to achieve this effect as well, with a line above and below the navigation bar but the above code did not make any changes to my website... any help would be appreciated 🙂 Site url: https://www.chloebthomas.com Link to comment
tuanphan Posted October 31, 2022 Share Posted October 31, 2022 On 10/27/2022 at 7:08 PM, C-bear said: Hey I would love to achieve this effect as well, with a line above and below the navigation bar but the above code did not make any changes to my website... any help would be appreciated 🙂 Site url: https://www.chloebthomas.com I see you figured it out with this code? nav.main-nav .active-link a { border-bottom: 1px solid currentColor; } 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