tuanphan

(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.

@LivAils Add to Home > Design > Custom CSS /* Hover */ nav.main-nav a:hover { border-bottom: 1px solid currentColor !important; } /* Active */ nav.main-nav .active-link a { border-bottom: 1px solid currentColor; } You can also use text-decoration: underline; but i like border-bottom

@marmar Add to Home > Design > Custom CSS .sqs-block-content a { font-weight: bold; border-bottom-width: 3px !important; }

@marmar Can you share link to your site, and which text block do you want to change link color?

@BobCarver .desc-wrapper { margin: 0px; text-align: left !important; width: 50% !important; padding-top: 64px; padding-bottom: 0; }

@rdreed Try Style & Script code: Page Settings > Advanced > Insert the code to Header And insert this code to bottom of page (you can use Markdown Block or Code Block to insert) <div class="logoload"></div>

@rdreed Your code <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #fff; /* SET BACKGROUND SIZE */ background-size: 90px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; background-image: url("https://static1.squarespace.com/static/5d9db9630e0cb109b5331185/t/5db877bc05d8093cb6fbfe15/1572370384602/mrnice-smiley.gif"); } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(500).fadeOut("slow"); }) </script>

@luke2 /* remove date single post */ .collection-type-blog.view-item .entry-dateline { display: none; } /* fix padding left */ .collection-type-blog.view-item .entry-morefrom:before { display: none; }

@clro it should be <a href="https://embodhii.org/emotional-freedom2pxiu8yh" target="_blank">Text link</a> or <a href="https://embodhii.org/emotional-freedom2pxiu8yh" target="_blank">https://embodhii.org/emotional-freedom2pxiu8yh</a>

.sqs-search-page-more-wrapper { display: none; }

Add to Home > Design > Custom CSS @Katariina123 /* Hide all content, title */ .search-results .sqs-content { display: none; } /* Image size */ .sqs-search-page-item .sqs-main-image-container { width: 100%; } .search-results .search-result { float: left; width: 33%; }

@Katariina123 Can you share your search page url?

@paul2009 thanks. How did you create the gif image?

@romerodan You can use custom css min-height Add to Home > Design > Custom CSS /* Height for desktop */ @media screen and (min-width:901px) { div#block-yui_3_17_2_1_1572308798174_58865 .image-card.sqs-dynamic-text-container { min-height: 500px; } } /* Height for Tablet */ @media screen and (min-width:641px) and (max-width:900px) { div#block-yui_3_17_2_1_1572308798174_58865 .image-card.sqs-dynamic-text-container { min-height: 300px; } } @erin3 Can you share url?

Target object class/id with Inspect Element, then add CSS to Home > Design > Custom CSS

Add to Home > Design > Custom CSS .collection-type-blog.view-item .dt-published.post-date { display: none; }

@Katariina123 Add to Home > Design > Custom CSS .sqs-search-page .sqs-main-content { display: none; }

@jg3d Add to Home > Design > Custom CSS /* Entire Site */ .Footer { display: none !important; } If it doesn't work, please share site url to check.

@therealcarlx Add to Home > Design > Custom CSS header#header { position: sticky; top: 0; background: #f2f2f2; }

@KristinGibson /* Decrease font size */ .sqs-announcement-bar-text p { font-size: 15px; } /* Decrease height */ .sqs-announcement-bar-text { padding-top: 5px; padding-bottom: 5px; } /* Close icon */ .sqs-announcement-bar-close:after { line-height: 1.5em; }

Try adding to Home > Design > Custoom CSS. If it doesn't work, can you share site url? .sqs-announcement-bar-dropzone { height: 15px; }

@CCavanagh Have you solved the problem yet? If no, can you share site url?

@FrancesMc "Like" (heart icon, bottom right) if the answer is correct. Thanks.

@FrancesMc Please "Like" if the answer is correct Remove above and add this @media screen and (max-width:480px) { /* Show description */ .sqs-gallery-block-slideshow .meta { display: block !important; } /* Font size */ .sqs-gallery-block-slideshow .meta * { font-size: 12px !important; } }

@FrancesMc Add to Home > Design > Custom CSS @media screen and (max-width:480px) { .sqs-gallery-block-slideshow .meta { display: block !important; } }