Search the Community

Site URL: https://www.core4.com.au/ Hi there My mobile navigation when scrolled below hero banner is white and i would like this to be the same colour as the remaining of my mobile navigation folder as i lose the exit and the logo. Please see attached screenshot. I have used the below code for remaining of navigation but just need the first section the same colour. Please note this is only on scroll. /*For the header background color:*/ @media screen and (max-width:640px) {.tweak-transparent-header .header .header-announcement-bar-wrapper:not(.shrink):not(.transparent-header-theme--override) { background-color: #4d4d4f !important; } } /*For the bottom piece with CTA button:*/ .header-menu-cta { background-color: #4d4d4f !important; } /*For the middle section with Nav items:*/ .header-menu-nav-folder-content { background-color: #4d4d4f !important; } /*And to change the hamburger/X icon colors:*/ .burger-inner:after { background: #fff !important; } .burger-inner:before { background: #fff !important; } Many thanks!

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

I'm using the collage block throughout my portfolio site and I'd like it to appear in different colors on different pages. For example, if you visit: https://www.johnpattersonportfolio.com/#/zulily/, you'll see purple - which works with the presentation. However, if you go to https://www.johnpattersonportfolio.com/#/wizardsofthecoast1/, you'll see the purple again. I would like it to be a light blue instead. I want to customize the color of the collage for every one of the 11 pages I have. Please help! Thanks! Dustin

Site URL: https://www.suziappelphoto.com.au Hi, Can I use CSS to set the colour for the announcement bar? I want the background to be the same as the Header but with a white font colour not how it currently is. This is in 7.1 and I cannot find where to customise it. Thanks, Leanne

Hey, I'm building my site in 7.1 (mainly to get to grips with using it) and I've come across one problem I can't seem to fix. The dropdown navigation has white text & a white background(image attached) My header colour palette is yellow, whereas the main website has a white background, I'm wondering if this is part of the problem. It'd be greatly appreciated if anyone can find any workaround for me. Site is here: https://hexaflexagon-star-bh8p.squarespace.comPasword: 123123

Hey! I'm trying to remove the overlay color from my background images so that my background images look exactly as they should without a color overlay. When they background color is white, the image looks washed out, when it's black it's too dark. I've tried numerous code injections into Custom CSS but no luck. Help!

Site URL: https://www.henrydrago.com/ Using 7.1 and I'm looking to either remove the white outline from the password box completely or just recolor it. The outline only appears when you click to enter the password. (image for reference) Site password is drago2020 if needed. Any help would be much appreciated! Thanks! Henry

Site URL: https://lupatrattoria.squarespace.com I would like to customize the background, button & text colors for the OpenTable block in my website. Right now the block background doesn't match the page color & the button is black instead of dark grey. Thanks!

Site URL: https://lizard-pomegranate-8dhb.squarespace.com/config/design/custom-css Hello everyone! I was wondering if anyone happen to know how to change the text font and color in the navigation header? In this case I would like to change the "work" "studio" "photo" & "shop" tags. Thanks!!

Site URL: https://bugle-grapefruit-mb38.squarespace.com/leadership I used custom css to shift my background image to the left because I wanted a split screen with my text to the right of the image. However, I would like to change the background color that's behind the text, which is currently sitting on a default white background, How do I do that?

Site URL: https://Santisuk.Squarespace.com I want to change the banner color on one page only. How do I do that?

Our main page shopping page says SOLD in the description for sold out items. I want it to read as red and have changed the color in Products: Basic Grid: Status, but it doesn't change it on the page. Any suggestions?

Site URL: https://www.bspokellc.com/ My burger icon is white across the board (which is what I want) but I have a header code that changes all inside page headers to black. This seems to also be changing the burger icon to black on those pages on the mobile view. I am also losing my button text color which actually changes to white? Not really sure how to fix this. It is correct on some mobile pages but not others. First two images are correct, but when I navigate to the 'sign up' page it changes to black and you can't see it, then when I click the burger/toggle just by clicking on the black header (top right) it goes back to white over the green, but my button text is missing. Any help is appreciated thank you!

Hello, I'm using the Five template - I'd like the last item in my navigation menu - 'Gift Guide' - to be in Red font. I'd like all other labels in the Navigation menu to remain in current format. www.roundtriptraveler.com

Site URL: https://www.karelwasch.nl Hi there! I'm struggling how to override the background color of all blog pages of the theme Handyman:https://www.karelwasch.nl/overzichtwerk/hetgeluidvandenken Can anyone help me please? I already tried the following code without any result. .collection-type-index #blog-books {background: #1700ff} It this works I would like to change all the type colors too for all the blog posts.

Site URL: https://matey.app/help-center Hi, I'm trying to figure out how to change the font color of the "contact us" link text to hex color #0075FF. Does anyone know how to do this without affecting the color of all the other links of the site? My site is using Squarespace 7.1. Thanks!

Hey everyone! I'm trying to simply change the COLOR THEME for sections of PRODUCT DETAIL PAGE. At the top of the PRODUCT ITEM, I can see "EDIT PRODUCT" and "EDIT DESIGN" but neither of them have anything to do with colors. If I navigate to "Colors" >>> "Section Themes", I can see the color themes for each section of the PRODUCT DETAIL PAGE. I can then click the COLOR THEME, in this case "White Bold", but it only prompts me to edit the COLOR THEMES instead of choosing the COLOR THEME I'd like to use. =/

Site URL: https://minnow-bison-eb6k.squarespace.com/ I've already added a hover colour effect and an active colour change to the navigation but the colour of the underline that applies to hyperlinks doesn't seem to be changing when active. Is there a way that I can change the colour of the underline? Thanks for any tips! The site password is: password and below is the css I already have in place on the site: /* Nav item color */ .header-nav-item a { color: Black !important; } /* Nav item hover color */ .header-nav-item a:hover { color: #ef5232 !important; } /* Nav item active color */ .header-nav-item--active a { color: #ef5232 !important; } /* Nav item hover color - underline */ .header-nav-item--active a { color: #ef5232; } .header-nav-item--active a { background-image: #ef5232; } @media (max-width: 800px) { .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } .gallery-masonry .gallery-masonry-wrapper { columns: 1; column-gap: 0; padding: 0 10px; height: auto!important; display: block!important; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; padding: 10px!important; transform: none!important; width: 93%!important; display: block; } } @media (max-width: 800px) { .item-pagination-title, .item-pagination-icon { font-size: 15px !important; line-height: 19px !important; } } .header-menu-nav-item a { font-size: 25px; } @media screen and (max-width:800px) { .gallery-grid-wrapper { grid-template-columns: repeat(1,1fr) !important; grid-row-gap: 5vw !important; } }

How do I change the color of the form block submit button? Thanks!

Site URL: https://mauve-daffodil-4gl4.squarespace.com/ Hi there, I've seen several answers to this question and have almost gotten it to work, but hoping someone can get me over the finish line. I want my client's logo reversed out of the header image on the home page, but then have it be in color on the rest of the pages where there's no header image. The code I found from TuanPhan (thank you!) is: body.homepage .header-title-logo img { filter: invert(1); } This kind of worked. It took it from it's regular dark blue to a beige on the home page only, but not white (see photo; it's the word "Rhetta."). Can anyone help? I want the logo to be pure white reversed out. Thank you!

I would like to change the color of hyperlinks on hover, and I've been able to do it, however it also affects the text in buttons. Is there a way to avoid that? (Bedford)

Can anyone tell me how to add color to font awesome in HTML? EXAMPLE: <span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> fa-twitter on fa-square-o<br> Little un sure how to add color

Site URL: https://mistoa.squarespace.com/ Hi! I'm trying to change Checkout button's color on Cart page, but haven't been able to do it. https://mistoa.squarespace.com/cart Any ideas? Thanks!

Hey, so I was pretty adept at squarespace 7.0, but 7.1 has me on my heels. Basically I want to add a color overlay to a video that is running (via Vimeo) so that the white type/banner I'll put over the video will pop. In 7.0 this was a snap to do, but now I'm drawing a blank. Also, I'm not that bright, so please make any directions simple. Thanks!

How can I make text change color when I hover over it? (not the navigation headings)