cenmor Posted July 24, 2020 Share Posted July 24, 2020 I'm on a new 7.1 template and I'd like to add vertical lines as my spacers between navigation items. I used some code to try and get it working but it didn't do it for me. Can someone help? Here's the code I used: /* Add vertical links */ .site-navigation .nav-item { border-right: 1px solid #000 !important; } /* Hide vertical last item */ .site-navigation .nav-item:last-child { border-right: none !important; } /* Change spacing */ .site-navigation .nav-item span { padding-right: 10px; } Link to comment
rwp Posted July 24, 2020 Share Posted July 24, 2020 Need a link to your page to help. Link to comment
christyprice Posted July 25, 2020 Share Posted July 25, 2020 Ghost has a free plugin that does this... you'd just want to change out the content from a slash to a vertical line. https://www.ghostplugins.com/steps/9sywh58h SShepherd, ghostplugins, Chele and 1 other 3 1 christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
rwp Posted July 25, 2020 Share Posted July 25, 2020 I think I found your page on another post. Try this: .header-nav-list .header-nav-item:not(:first-child) { border-left: 1px solid black; margin-left: .7vw !important; padding-left: .7vw !important; } Link to comment
Chele Posted October 5, 2020 Share Posted October 5, 2020 @christypriceThat worked perfectly. Thank you! christyprice 1 Link to comment
KristenisNeat Posted January 29, 2021 Share Posted January 29, 2021 Hi! I used the Ghost Plugin code - thanks @christyprice! I'm just wondering how I remove the slash after 'Contact Us' - thanks in advance! Link to comment
christyprice Posted January 29, 2021 Share Posted January 29, 2021 @KristenisNeat Great question! You'd just want to change up the code a bit from Ghost like this: .Header-nav-item:not(:last-child):after { ghostplugins 1 christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
KristenisNeat Posted February 10, 2021 Share Posted February 10, 2021 @christyprice Thank you! I'm a bit of a newb here - do I replace a portion their code or just add it in? I've added it in, it tells me it needs an end bracket so I added one (had no idea where but took my best guess line 33)... and nothing happened. I am 100% sure it's user error LOL Help! Link to comment
christyprice Posted February 10, 2021 Share Posted February 10, 2021 @KristenisNeat you'd want to replace .Header-nav-item:after { with .Header-nav-item:not(:last-child):after { in the original code. christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
sharine Posted October 30, 2022 Share Posted October 30, 2022 Hi, I’m trying to implement this code and it's not working for me! Site: https://eagle-mayflower-l68a.squarespace.com Password: bashy I’m trying to get my navigation links evenly spread out across the full width of the container, centered, with vertical lines separating each. It keeps justifying left Link to comment
tuanphan Posted November 4, 2022 Share Posted November 4, 2022 On 10/31/2022 at 12:48 AM, sharine said: Hi, I’m trying to implement this code and it's not working for me! Site: https://eagle-mayflower-l68a.squarespace.com Password: bashy I’m trying to get my navigation links evenly spread out across the full width of the container, centered, with vertical lines separating each. It keeps justifying left It looks like you solved with this CSS? .header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 100% !important; flex-direction: column; width: 100% !important } .header-display-desktop { flex-direction: column } .tweak-fixed-header .header .header-announcement-bar-wrapper { padding-left: 0; padding-right: 0 } .header-nav { width: 103.2%; border-top: 1px solid #000; padding-top: 0px; padding-left: .7vw !important; border-bottom: 1px solid #000 !important } .header-nav-item:hover { background-color: #6e6843 !important } .header-nav-item--divider { padding: .1rem 0; border-right: 1px solid #000 !important } 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
tuanphan Posted February 21, 2023 Share Posted February 21, 2023 On 2/17/2023 at 9:53 AM, MKP said: Do you think it's possible to create the same-looking navigation on Squarespace like this website? https://mariamharris.com/ They used custom HTML, so there are two ways to do this #1. Use HTML code to recreate Header #2. Use Header layout: Left Nav - Middle Logo, then we will test the code 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
estirli Posted May 9, 2023 Share Posted May 9, 2023 (edited) Hi, I've implemented this code on my site: https://wolf-asparagus-z3wn.squarespace.com/ PW: Wheelhouse360!2023 How do I get the vertical lines to show up black on the pages where the header is on a white background with black text? I am also looking to center the vertical lines between each nav link. Edited May 9, 2023 by estirli Link to comment
tuanphan Posted May 10, 2023 Share Posted May 10, 2023 On 5/9/2023 at 10:09 AM, estirli said: Hi, I've implemented this code on my site: https://wolf-asparagus-z3wn.squarespace.com/ PW: Wheelhouse360!2023 How do I get the vertical lines to show up black on the pages where the header is on a white background with black text? I am also looking to center the vertical lines between each nav link. Add this to Dark Page Header <style> .header-nav-item a:after { color: black; } </style> 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
lizzielozzieloo Posted July 27, 2023 Share Posted July 27, 2023 (edited) On 2/9/2021 at 8:21 PM, christyprice said: @KristenisNeat you'd want to replace .Header-nav-item:after { with .Header-nav-item:not(:last-child):after { in the original code. This didn't work for me, it removed all the lines for me. Website: https://tortoise-sapphire-zj9e.squarespace.com/ password: srs Edited July 27, 2023 by lizzielozzieloo Link to comment
tuanphan Posted July 27, 2023 Share Posted July 27, 2023 6 minutes ago, lizzielozzieloo said: This didn't work for me, it removed all the lines for me. Website: https://tortoise-sapphire-zj9e.squarespace.com/ password: srs Add this code to Design > Custom CSS div.header-nav-item:last-child>a:after { visibility: hidden; } skcmarketing and christyprice 2 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
CesO Posted March 14 Share Posted March 14 On 10/31/2022 at 4:48 AM, sharine said: Hi, I’m trying to implement this code and it's not working for me! Site: https://eagle-mayflower-l68a.squarespace.com Password: bashy I’m trying to get my navigation links evenly spread out across the full width of the container, centered, with vertical lines separating each. It keeps justifying left Did you figure this out? Would love to know your solution! I'm trying to do the same. Link to comment
tuanphan Posted March 15 Share Posted March 15 On 3/14/2024 at 11:11 AM, CesO said: Did you figure this out? Would love to know your solution! I'm trying to do the same. If you share site url, we can check your case easier 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
PiersVivash Posted May 20 Share Posted May 20 On 7/25/2020 at 5:29 PM, rwp said: I think I found your page on another post. Try this: .header-nav-list .header-nav-item:not(:first-child) { border-left: 1px solid black; margin-left: .7vw !important; padding-left: .7vw !important; } I logged in to tell you that you are a legend! This worked for my website. Many thanks! 🏁 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