Search the Community

Site URL: https://awmenikah.squarespace.com/ Hi everyone, I have a case that I want to change my mobile menu background and menu items colors differently for each page. Is there any ways to do it? My site URL: awmenikah.squarespace.com Pass: sikatmbuy Thank you in advance! Cheers, Wendy

Site URL: https://innerelementspsychotherapy.com Hi there! I am wondering if anyone has custom CSS to add to change the color when the mouse is hovering over an item in a dropdown from the nav bar? Thank you!

Site URL: https://www.marydisomma.com I can't figure out how to change the color of my tiktok social link icon in the header of a client's site. I've tried using code from several different threads I found in the forum, but I just couldn't make any of them work. Also, tiktok icon is only showing up on the homepage. On the other pages, a hyperlink icon shows instead. I need the tiktok icon in the header of each page, and it needs to be #5793ce. Thank you to the folks who help here on the forum. You guys are life savers! 🙂

Hi, I have desperately been trying to change the background color of the navigation bar of my website... It should look like this: https://www.couldihavethat.com/ The logo should be in the top left corner with no background color. Thanks everyone for your help

Site URL: https://safeharborcoronado.org I have a text module with a paragraph of text that is blue. I want to style the first two words of the paragraph to be red. Also I'll want this same paragraph styling on multiple pages. Is it possible to apply a custom css class to the text module then style it in the custom css panel? Thanks.

Site URL: https://www.swarovskiwellbeingweek.com/monday Hey legends, I'm just wondering how I can still have the main desktop menu links in white font to be visible on the images, but to change them to black so they're visible on the mobile menu (which changes the menu background to white so the whole menu is invisible). Thanks heaps!

Site URL: https://www.huntersgaragehydepa.com/ Hello! I would like to change the "Book Appointment" button color on the homepage to the color #0511F2, but I don't have the skill or the understanding to change it myself. If you can help me at all with my problem I would be very appreciative 🙂

Site URL: https://www.saccostyle.com/ I want to have the Header Navigation drop down background colour to be transparent. Currently its white. I tried some CSS code which seems to work on the site editor, but when the site is published and live it shows up as white. The code I used was this: .header-nav-folder-content { background: #ffffff00 !important; } HELP?! @tuanphan

Is there any way to change the colour of the logo so it matches the colour of the menu items in the site style? I have a site which has certain pages with a light background (because of the site style) where the logo is black. One page has a coloured background and so I would love the logo to be white. The menu items change colour because of the site style, can I change the logo if I upload another one>? @tuanphan

Site URL: https://www.saccostyle.com/ I would like to change the colour of instagram logo, login and cart icon in header to white on home page only. Other pages I want everythig in the header to be black, so just the homepage as then its white over the background video. I have used code to invert the colour of the logo and the menu items already. Thanks! @tuanphan

Site URL: https://project351.org Hello, I have a single word in my navigation bar with a different background color to make it stand out, but when you hover over it it blends into the background. How can I make the hover letter color for this word only stay white? Word: Donate Note: This happens when I hover over any of the words, not just the word "donate". I want it to stay white whenever any words in the navigation bar are hovered. Pictures attached!

Site URL: https://www.pbsconsultancy.net/ Hello, I'm having an issue with my navigation css and wondered if anyone could tell me where I'm going wrong. Firstly the 'Our impact' menu item needs to stay red when active and secondly the 'About' nav needs to be pink #FF29C7 on hover, active and sub menu hover. The code I have is: .header-actions-action .btn {color: #003349 !important; background-color: #97d700 !important; } /* SS 7.1 - Remove nav underline */ header#header a:not(.btn) { background-image: none !important; } .sqs-block-html a {background-image:none!important} /* our services hover */ .header-nav-item a[href="/our-services"]:hover { color: #59CBE8 !important; } /* our services active */ .header-nav-item--active [href="/our-services"] { color: #59CBE8 !important; } /* our services folder hover */ .header-nav-item:hover>a, .header-nav-folder-item:hover a { color: #59CBE8 !important; } /* our services folder active color */ .header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active { color: #59CBE8 !important; } /* our impact hover */ .header-nav-item a[href="/our-impact"]:hover { color: #F9423A !important; } /* our impact active */ .header-nav-item--active [href="/about"] { color: #F9423A !important; } /* our support hover */ .header-nav-item a[href="/our-support"]:hover { color: #FFD100 !important; } /* our support active */ .header-nav-item--active [href="/our-support"] { color: #FFD100 !important; } /* about hover */ .header-nav-item e[href="/about"]:hover { color: #FF29C7 !important; } /* about active */ .header-nav-item--active [href="/about"] { /* about folder hover */ .header-nav-item:hover>a, .header-nav-folder-item:hover a { color: #FF29C7 !important; } /* about folder active color */ .header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active { color: #FF29C7 !important; } color: #FF29C7 !important; } /* resources hover */ .header-nav-item a[href="/resources"]:hover { color: #97D700 !important; } /* resources active */ .header-nav-item--active [href="/resources"] { color: #97D700 !important; } Any help would be much appreciated as I dont know what i'm doing wrong! Thanks

Hi, Im having issues with a very simple task. Im trying to edit the font color of my Headline on the Promotional Pop-up style editor. For any unknown reason, it doesnt change. No matter which color I choose, it always stay in color red. With other fonts, like the body or buttons, It changes to whatever color I choose, but not with the Headline...

Looking to update the background color for the access denied screen for Member Areas on a Brine template with version 7.0 when using the Index Page specifically.

Hi! Newbie here! I'm using the Keene template and the phone number on my footer in my mobile version is showing up as a white color. The background color is a light green so the phone number is not showing up. I've been looking for answers all day on the forum and google and am still having trouble. Hoping someone can help! This is my website: www.RussellDentalLV.com 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.

Site URL: https://www.pppartners.sg/ Hi, Does anyone know how I can set my navigation bar with colour gradient? I set a picture in my home page top section (first picture) and I like this colour gradient so I was thinking if it is possible to have this colour gradient as my navigation background when I go to the other pages to make it more "standardise" but I am not sure how to work around with it. If setting a colour gradient as my navigation background is impossible, how can I set colour to my navigation background? I tried playing around with it (second picture) but doesn't seem possible.

Site URL: https://garlic-vanilla-9jsw.squarespace.com I'm trying to change the color of the ▮ symbol to the red I'm using on the site, while keeping the rest of the navigation the same color. For example: "▮Nosotros"; red for "▮" and white for "Nosotros" closest I got was this code, but I could not find a way to determine individual characters: .header-nav-item a[href="/about"], .header-menu-nav-item a[href="/about"] { color: #ec8349 !important; } Thanks!

Hi! My navigation links are red and fade to black on hover. The active link is underlined. However, I can't figure out how to make the underline turn black as well when hovering; it remains red. Anyone know of any CSS that could help with that? Thanks.

Site URL: http://www.roomone.ca Hi There, I'm trying to figure out how to make the font in my banners white instead of black. I only want the font to be white when over the banners, but I can't do this without changing the colour of the font sitewide. I've tried to find CSS but nothing seems to be working. Any help would be very much appreciated! https://www.roomone.ca/treatments-1 Thank you! Tessa

Site URL: https://www.shelbyargo.com/ Hey, I'm working on my website and have added additional CSS code to my site's template to create image overlays, but can't figure out how to change the color of the overlay, it's currently black at an opacity. I think the color might already be determined in the templates code. This is the code I'm using. Is there a way to override that? .image-caption-wrapper { opacity: 0; text-align: center !important; top: 0 !important; width:100%; height:100; border: 2px solid white; padding: 1px; margin: 0px; position: center !important; pointer-events: none !important; } &:hover, &:focus { opacity: 1; } .image-caption { left: 50%; position: absolute; top: 50%; width: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .image-caption p { font-size: 13px !important; font-weight: normal !important; color: #ffffff !important; line-height: 7px !important; letter-spacing: .8px !important; opacity: 1 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: #ffffff; opacity: .9; }.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover:hover .image-caption-wrapper { max-height: 100%; }

Hi, I am wondering if anyone can help. I have changed two symbols on my site title to a different colour (please see below) however this has not been reflected in mobile view - can someone help? (please see image attached below) https://www.oldtownshokudo.co.uk/ Password: 123Shokudo Many Thanks Jack @tuanphan

Site URL: https://www.locallocalfoods.com/ Password: LLF Hello! Anyone know why I am unable to change the color of the caption text in my form boxes? I already tried changing it in my site styles under the form block > caption color > white but it isn't working for some reason. I'm also having trouble finding what to target in the css to get it to change. Any help or CSS code to override would be greatly appreciated. Thanks!

Site URL: https://girlwithoutatripod.com/ I am trying to revers my black png logo to white on the Home and About page where it appears on top of a photo. I have tried 2 different codes (see below) and still the logo appears gray instead of white. Also, on all other pages where the logo should appear black, instead it is showing up as gray and I have no idea why. These issues are on both desktop and iPad when I log in to the website. When I’m actually in Squarespace the logo is black on the white pages as it should be. Everything looks ok on a phone. Here are the codes I’ve inserted on the home and about page to get the logo to look white: Code A <style> .Header-branding-logo { -webkit-filter: invert(100%); filter: invert(100%); } </style> Code B <style> .Header-branding-logo { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } </style> Would be thrilled if someone would be able to help and let me know what I'm doing wrong! I have searched high and low for a solution without any luck… Thanks!

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!