Search the Community

So I have a site that's not yet active but I am trying to figure out how to make the navigation links when hovered over change color like a button does and be highlighted with a background color... for instance I also work with this company CarCultureTV.com to see how the nav works. Would this coding plus something extra make that work or is even possible with squarespace?

Site URL: https://whale-mushroom-t6kh.squarespace.com I'm not sure why when I change the image lock to a card (anything other than inline), it adds an opacity over the image. How do I remove the image overlay?

(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: violet !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://seadragon-pear-6ndb.squarespace.com/ https://seadragon-pear-6ndb.squarespace.com/ password: op1 I would like the light green block to span the full width of the page and be only about as tall as the red box indicated in the screenshot. I also want to make sure there isn't excess white space below the box when I remove that bottom portion of the green box. So far, here is the CSS I've tried. #yui_3_17_2_1_1582047611039_56 { padding: 20px 0px 0px 0px !important; background: #f1f5e6; } TIA for any help!

Site URL: https://www.joeandjenphoto.com/contact Hello, I'm on version 7.0 SS and hoping to customize the color of the social links block beyond the options of black, white, or 'standard'. Hex value is #c6b09f, here's the page I'm working on: https://www.joeandjenphoto.com/contact Anyone have code to be able to do so? Thank you! Joe

Site URL: https://www.matey.app/support Hi! I'm trying to figure out how to change the active text field color when typing in the text box in a Form Block. Currently, I changed the text field color to dark gray #262626, but when typing in it, it changes color to white. I've attached a screenshot below. How do I prevent this with CSS? My template is Stanton. Thanks in advance for your help!

Hi I am trying to change the image size of the first image/header image for each project. Trying to scale the image down to same size as the rest of the project images as seen in attachment 002.jpg. Also there seems to be a colour overlay on the top image, can this be removed? Thanks in advance.

Hi there, Is there anyway that I can have the background colour of a button change automatically/on a timer? I would like a slideshow background on my homepage, with a button that changes colour to match the colour of the background image. See https://www.jonmaselli.com/ for an idea of what I'm looking for. Is this possible?

Hi there, I'd like to add a background to my website that is similar to this example: https://www.ginlane.com/ I've managed to work out how to just add a background color gradient, but it isn't quite the effect I'm after and I'd more so like to add a gradient/color change that activates on scroll. As I will be using colors that don't necessarily gradate (as per the example above), I'm wondering if instead of looking for a gradient option I should be looking for an option that would offer a smooth transition between background colors instead? I'm using the Mentor template, which is in the Brine family. Any help or suggestions are greatly appreciated! Thanks, Jessica

I would like to change the header color on all my blog post pages while leaving the header to be controlled by the template on all other pages. My logo colors are not compatible with the white header for the blog post pages in the template I am using (Sackett). I am using an alternate logo on other pages that are also incompatible but I don't want to have to use a custom CSS code every time time I post a blog. Is there a custom CSS I can inject that will affect all the blog post pages only?

Hi I have the pacific template and am trying to target a specific page and change the background color. I already have a custom code increasing the max-width of the content on the page as below #collection-5e3c8b724983176cf11b8804 #page { max-width: 1310px } I want to keep this code and add the background color. Thanks!!! --- Edit I was playing with it and this code changes the background color but not full width! #collection-5e3c8b724983176cf11b8804 #page { max-width: 1310px; background-color:#34b9ec; } I need the color to go all the way to the edge of the screen

I'm hoping to change the text color on the buttons on this page from black to white when you hover over them with the mouse: https://www.elizabethconwellcounseling.com/fees-forms/. Can someone help me out with this? Thanks!

Site URL: https://www.menos.cc Hey! I'm having issues customizing the horizontal lines. I bumped into the code below: .sqs-block-horizontalrule hr { background: transparent!important; border: 2px dotted; height: 2px; } It worked and it looks like what I wanted, the problem is: every line now has the same color - a light grayish. I wanted them to follow the colors picked for each style on the Design section. Can anyone help?

Site URL: https://www.weacceptcryptocurrency.com/ I want to make the period at the end of my homepage header the same color as the logo of my site (in top-left). Is this only possible with CSS customization?

I designed a site last year with multiple navigation font colors by adding this code into the title of each navigation item so that it looked like the attached picture: <font color="0c9e9f">About</font> Squarespace has since updated, and the code no longer works. The navigation colors are set to white again. www.ralphfarris.com Does anyone have a suggestion to fix this? I would really appreciate it!

When editing text on my site, I can only change the font color for entire text boxes, not individual words, lines, etc. How can I specifically choose the words I want changed rather than the built in tools changing everything?

Hi forum, Quick question. I'm trying to emphasise a key sentence within a larger body of text in a text block by changing the background and text colour of only that sentence. Essentially, I want what it looks like when you change the background and text colour in a rich text editor, like this: First sentence. *Key Sentence.* Third sentence. Any help would be very much appreciated.

Hi I am using Wexley I see that every heading size I choose picks up the HeadingS color. Is there a way to give individual headings a different color for each Like Heading 2 be Green and Heading 3 be Blue? Is that going to be a piece of coding for each page? Thank you

Hello, I'm trying to change the colour of one h1 heading on one page, and none of the usual stuff is working. I'm putting it in the advanced area of that page. What am i doing wrong? At the very bottom of this page, where it says "connect with me". I want that to be red, not white https://www.caroline-shenaz-hossein.com/caroline-shenaz-hossein Thanks

Hey, I am trying to change the background color of one specific page on the Marquee template...any suggestions? Thanks

Hello! I am looking for a bit of CSS code that allows me to repurpose the Italic styling in Brine. I want it to not make the text italic but change the color to #428BCA instead. This could be done in Markdown but I would rather use the UI buttons within the text styling window to change specific words, not a whole paragraph.

Hello. Im trying to find a way of having a colour overlay appear on the hover of an image within a gallery. I dont want this effect across every single image just certain ones within a gallery. Please see the site below for reference - as you hover over a project the colour pink overlays. https://megalodon-rose-khl5.squarespace.com/ password: Testingpassword Reference - https://www.contrastcreative.co.uk/

I'm adding a gallery of images to my site. When using a gallery, the background for transparent images is different than when I just insert an image block. I want them the same for images and the gallery. Can I change the gallery background color? The gallery is the image on the right in the attached screenshot.

Hello all. I am currently using the Sonora Template which gives a nice banner image layered underneath the logo, so I have chosen a white logo. However all other pages are white headers so the logo does not show. How can i use a black logo and then invert or use a custom logo just on the homepage so that the logo it white on the homepage Thanks.

Hi, I want to change my hover underline colour on a specific page to black, is there someone who can help me out? I want to change the colour on my About page to black My website: etrenoir.net I'm currently using this code for my hover underline: header nav a:hover:after{ transform: scaleX(1); } header nav a:after { display:block; content: ''; border-bottom: solid 1.5px #FFFFFF; transform: scaleX(0); transition: transform 250ms ease-in-out; z-index: 999; transform-origin :100% 50%; } }