tuanphan Posted November 1, 2019 Posted November 1, 2019 (edited) (Updated: SS 7.1) Some custom code (CSS) to change color Navigation Link Navigation Hover Link Navigation Active Link >> 92 Templates Navigation Custom Font Notes Add code to Home > Design > Custom CSS The code is based on demo at squarespace.com/templates, so they may not work for some websites or navigation with dropdown If the code doesn't work, try adding !important to after, eg: color: #f1f2f3 !important; If you have any questions/found issues, just comment below or send me a private message. Thanks. Avenue Template /* Nav item color */ .main-nav ul li a { color: #ff0000 !important; } /* Nav item hover color */ .main-nav ul li a:hover { color: violet !important; } /* Nav item active color */ .main-nav ul li.active-link a { color: green !important; } Aviator /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Bedford Family: Anya, Bedford, Bryant, Hayden, Bedford /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Brine Family: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine. /* Nav item color */ .Header-nav-item { color: #ff0000 !important; } /* Nav item hover color */ .Header-nav-item:hover { color: violet !important; } /* Nav item active color */ .Header-nav-item--active { color: green !important; } Farro: Farro, Haute Same as Brine Five /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Flatiron /* Nav item color */ ul#nav li a { color: #ff0000 !important; } /* Nav item hover color */ ul#nav li a:hover { color: violet !important; } /* Nav item active color */ ul#nav li.active-link a { color: green !important; } Forte /* Nav item color */ #topNav ul li a span { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover span { color: violet; } /* Nav item active color */ #topNav ul li.active-link a span { color: green !important; } Ishimoto /* Nav item color */ #topNav #nav li a { color: #ff0000; } /* Nav item hover color */ #topNav #nav li a:hover { color: violet; } /* Nav item active color */ #topNav #nav li.active-link a { color: green !important; } Momentum /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } Montauk: Julia, Kent, Montauk, OM Same as Momentum Native /* Nav item color */ #navBlock ul li a { color: #ff0000 !important; } /* Nav item hover color */ #navBlock ul li a:hover { color: violet !important; } /* Nav item active color */ #navBlock ul li.active-link a { color: green !important; } Pacific: Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Skye: Foundry, Indigo, Ready, Skye, Tudor /* Nav item color */ .nav-blocks-wrapper div a span { color: #ff0000; } /* Nav item hover color */ .nav-blocks-wrapper div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.nav-link--active a { color: green !important; } Tremont: Camino, Carson, Henson, Tremont /* Nav item color */ #mainNavigation div a span { color: #ff0000; } /* Nav item hover color */ #mainNavigation div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.active a span { color: green; } Wells /* Nav item color */ div#topNav ul li a { color: #ff0000 !important; } /* Nav item hover color */ div#topNav ul li a:hover { color: violet !important; } /* Nav item active color */ div#topNav ul li.active-link a { color: green !important; } Wexley /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } York: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York /* Nav item color */ .site-navigation div a span { color: #ff0000; } /* Nav item hover color */ .site-navigation div a:hover span { color: violet; } /* Nav item active colo */ .site-navigation div.active a span { color: green; } Squarespace 7.1 /* Nav item color */ .header-nav-item a { color: #ff0000 !important; } /* Nav item hover color */ .header-nav-item>a:hover { color: red !important; } .header-nav-folder-item:hover a { color: red !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; } Created by Tuan Phan. Share to be shared more. Edited July 16, 2020 by tuanphan update code for SS 7.1 sgess, drudesign, IvanOB and 20 others 9 11 3 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!)
tuanphan Posted December 9, 2019 Author Posted December 9, 2019 Updated code for Squarespace 7.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!)
tom345647 Posted December 22, 2019 Posted December 22, 2019 First, thanks tuanphan, your other posts have already helped me multiple times. But I am using Carson (says Tremont family) and this did not work for me. I tried searching the view-source: of my site for most of these options and I did not find one that works. To many links on to many different backgrounds, the more I could access link color and hover color for different places, like navigation, would help a lot. bpc 1
tuanphan Posted December 22, 2019 Author Posted December 22, 2019 5 hours ago, tom345647 said: First, thanks tuanphan, your other posts have already helped me multiple times. But I am using Carson (says Tremont family) and this did not work for me. I tried searching the view-source: of my site for most of these options and I did not find one that works. To many links on to many different backgrounds, the more I could access link color and hover color for different places, like navigation, would help a lot. Can you share link to your site? jaisequoia 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!)
tom345647 Posted December 26, 2019 Posted December 26, 2019 The site is not live yet. I think I figured it out. Similar to Square 7.1 .nav-item a:hover { text-decoration: underline !important; color: hsl(120, 87%, 52%) !important; } tuanphan 1
EdStemp Posted January 16, 2020 Posted January 16, 2020 Hi im using Brine but wanting to change the link hover colour to all text across the site and not just the nav bar. Can you help? Thanks
tuanphan Posted January 16, 2020 Author Posted January 16, 2020 5 minutes ago, EdStemp said: Hi im using Brine but wanting to change the link hover colour to all text across the site and not just the nav bar. Can you help? Thanks a:hover {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!)
EdStemp Posted January 16, 2020 Posted January 16, 2020 Thanks Tuanphan! Is there an additional code to remove the hover colour from the footer?
EdStemp Posted January 16, 2020 Posted January 16, 2020 Hi Tuanphan, could I possibly ask you another question - is there away to remove the banner overlay colour just on one specific page?
tuanphan Posted January 16, 2020 Author Posted January 16, 2020 1 hour ago, EdStemp said: Thanks Tuanphan! Is there an additional code to remove the hover colour from the footer? depends template. each template has different code. you can add css to Page Header to remove overlay on specific page 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!)
EdStemp Posted January 16, 2020 Posted January 16, 2020 44 minutes ago, tuanphan said: depends template. each template has different code. you can add css to Page Header to remove overlay on specific page Do you know what the CSS would be for that? thank you!
EdStemp Posted January 16, 2020 Posted January 16, 2020 44 minutes ago, tuanphan said: depends template. each template has different code. you can add css to Page Header to remove overlay on specific page Its the Ethan template from Brine
tuanphan Posted January 18, 2020 Author Posted January 18, 2020 On 1/16/2020 at 9:20 PM, EdStemp said: Do you know what the CSS would be for that? thank you! Need site url to check. 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!)
thewendyhouseproject Posted January 21, 2020 Posted January 21, 2020 Thank you so much tuanphan! This has been extremely helpful! Can you please help me with a little hiccup? I'm using Maple template which belongs to the Brine family. I added this code based on your knowledge to have a little outline on the active page: .Header-nav-item--active { outline-style: solid !important; outline-width: 1px !important; outline-offset: 3px !important; } It works like a charm, but only on pages in the header. Links and Folders seem to have a different coding since it isn't working. Would appreciate your help a lot! NEC 1
tuanphan Posted January 22, 2020 Author Posted January 22, 2020 3 hours ago, thewendyhouseproject said: Thank you so much tuanphan! This has been extremely helpful! Can you please help me with a little hiccup? I'm using Maple template which belongs It works like a charm, but only on pages in the header. Links and Folders seem to have a different coding since it isn't working. Would appreciate your help a lot! Can you provide site url? 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!)
thewendyhouseproject Posted January 23, 2020 Posted January 23, 2020 On 1/21/2020 at 6:50 PM, tuanphan said: Can you provide site url? Sure, it's thewendyhouseproject.com thank you so much!
StageOz Posted January 28, 2020 Posted January 28, 2020 Please let me know if you have a solution. I'm using the Carson Template and just want to turn off a page overlay on my info + contact page. stageoz.com thank you!
tuanphan Posted February 1, 2020 Author Posted February 1, 2020 On 1/22/2020 at 3:56 AM, thewendyhouseproject said: Thank you so much tuanphan! This has been extremely helpful! Can you please help me with a little hiccup? I'm using Maple template which belongs to the Brine family. I added this code based on your knowledge to have a little outline on the active page It works like a charm, but only on pages in the header. Links and Folders seem to have a different coding since it isn't working. Would appreciate your help a lot! I don't see folders on your site to check 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!)
tuanphan Posted February 1, 2020 Author Posted February 1, 2020 On 1/22/2020 at 3:56 AM, thewendyhouseproject said: Thank you so much tuanphan! This has been extremely helpful! Can you please help me with a little hiccup? I'm using Maple template which belongs to the Brine family. I added this code based on your knowledge to have a little outline on the active page It works like a charm, but only on pages in the header. Links and Folders seem to have a different coding since it isn't working. Would appreciate your help a lot! I don't see folders on your site to check 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!)
Adrian06 Posted February 20, 2020 Posted February 20, 2020 (edited) On 12/9/2019 at 3:19 AM, tuanphan said: Updated code for Squarespace 7.1 Hello and thank you for this. I'm designing in 7.1 and it worked nicely. However it doesn't quite look right with the active page underline. I have searched around the forum but I couldn't find how to remove it. Are you able to help with that? Kind regards, Adrian Edited February 20, 2020 by Adrian06
tuanphan Posted February 20, 2020 Author Posted February 20, 2020 3 minutes ago, Adrian06 said: Hello and thank you for this. I'm designing in 7.1 and it worked nicely. However it doesn't quite look right with the active page underline. I have searched around the forum but I couldn't find how to remove it. Are you able to help with that? Kind regards, Adrian Can you share link to your site? 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!)
Adrian06 Posted February 20, 2020 Posted February 20, 2020 (edited) 4 minutes ago, tuanphan said: Can you share link to your site? https://greenstonegroup.squarespace.com/ p: green Edited February 20, 2020 by Adrian06
tuanphan Posted February 20, 2020 Author Posted February 20, 2020 5 minutes ago, Adrian06 said: https://greenstonegroup.squarespace.com/ p: green I see green underline here? I checked code, and it is also green underline 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!)
Adrian06 Posted February 20, 2020 Posted February 20, 2020 1 minute ago, tuanphan said: I see green underline here? I checked code, and it is also green underline I want to remove the underline. It's black initially and then turns green once you hover it.
tuanphan Posted February 20, 2020 Author Posted February 20, 2020 2 minutes ago, Adrian06 said: I want to remove the underline. It's black initially and then turns green once you hover it. .header-nav-item--active a { background: none !important; } Adrian06 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment