pipedreamdesign Posted March 18 Share Posted March 18 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. Any way I can create this using CSS? Link to comment
tuanphan Posted March 21 Share Posted March 21 Can you share link to page? I think we can use CSS pseudo to achieve this 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
pipedreamdesign Posted April 18 Author Share Posted April 18 Sorry to reply so late! The site is up at https://primrose-dandelion-zjlf.squarespace.com/ Link to comment
Solution tuanphan Posted April 20 Solution Share Posted April 20 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; } 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
pipedreamdesign Posted April 22 Author Share Posted April 22 That just gives me a 5px red line? The 2nd line of code doesn't seem to do anything. If I erase everything after the 2nd curly brace nothing changes. Link to comment
creedon Posted April 22 Share Posted April 22 (edited) This is what I'm seeing. 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 April 22 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
pipedreamdesign Posted April 22 Author Share Posted April 22 Oh you're right! I opened it in a private browser and it works perfectly. Thanks so much! tuanphan and creedon 1 1 Link to comment
pipedreamdesign Posted April 28 Author Share Posted April 28 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: Any ideas? Link to comment
tuanphan Posted April 29 Share Posted April 29 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: 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; } pipedreamdesign 1 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
pipedreamdesign Posted April 30 Author Share Posted April 30 14 hours ago, tuanphan said: Add this CSS under code I sent header#header:before { content: ""; position: absolute; bottom: -13px; left: 0; width: 100%; height: 7px; background-color: #fff; } I adjusted the -13 to -14 and changed #fff to white, but otherwise absolutely nailed it! You're a saint @tuanphan! tuanphan 1 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