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: http://https/pentagon-flugelhorn-7ba3.squarespace.com/ Hi there! I currently have all buttons on my site set to utilize the hover functionality. When you hover, the button background color is HSL 251°, 74%, 45% or #3d1ec8 with a white font. On my Home page, I have two buttons: "Learn How I Can Help You" and "Contact Me". I would like for both of these button to NOT have a hover feature but rather just have the button background color be HSL 251°, 74%, 45% or #3d1ec8 with a white font regardless of whether or not you're hovering (like the attached file of the "Contact Me" button) What is the necessary code and where do I input? Many thanks!

Site URL: https://www.thislandisdigital.com/ Right now I have some code set up that assigns a background color to certain text blocks across my site to make them readable in the same way that the "Image Block: Card" element does. Unfortunately, when I try to apply that to pages like my "Home a Drone" page, it cuts out the spacers on the side. Including the spacers doesn't fix the problem either since they won't dynamically scale to match the height of the text block, instead leaving cutouts underneath them. In the example below, the height of the spacers doesn't match the height of the text, leaving a fat T shape. What I need is to 1.) have a block of color that is as wide as the rest of the content on my page (stopping before the side padding), 2.) covers the entire text block so that it can be read easier, 3.) aligns aesthetically with the existing dividers, and 4.) dynamically scales with the rest of the page. I don't know what options I have available to me necessarily, but my first guess is to somehow create a new shape that dynamically follows to the center of each divider (one is a divider element, the other is the "Page Border" from the site style). Any help would be appreciated.

Hello, How can I get the header on the index (home) page to have a transparent background so the photos are layered behind the text, while maintaining the white background on the other four pages and the fixed position overall? I'm using the Miller template, and the site is http://iggyrabinovich.com/. Thanks!

Site URL: https://besquared-probike.squarespace.com/ Am I blind? I cant seem to find how to change the colour of the header on the product pages. I want the site header to black but the background to be white 🤞 I have done it for rest of the site by following this But I cant find how to change a section colour for the product page without making the background black too. The sites password is: besquared

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

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

Site URL: https://www.tak-l.com/ I am currently editing on the Carson template which isn't live yet. My logo is dark, which suits light backgrounds. However the logo does not change to white with respect to the background color if the background is dark too. Anyone know a workaround this? Thank You!

I am trying to edit the colour of any link text on my site - both in the navigation and on pages - using 7.1. The option doesn't seem available in site styles/ themes, which seems odd as it's a fairly basic request. I'd like the hover over/ active colour to be #01aef0. I would also like the colour to remain when you are on a page - so when you are on the About page, the navigation title stays as the hover colour as an indicator. Sorry I don't know how else to describe that! My site is carbonbuddyproject.org Thanks, Emma.

Site URL: http://shannonewing.com Does anyone know how to change the default color theme in 7.1? Somehow the default went from White Minimal to Black Minimal and it's affecting the way pages are loading.

Hello! I've got an issue with a website I'm designing (it's not live yet unfortunately). The client would like the quote indented (as normal) but doesn't like the black straight line (divider) to the left of the quote. There is no option to remove it or change the color in the style menu. The template I'm using is 'Kent'. Any ideas would be greatly appreciated! Many thanks.

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.ayudaroc.org/services/ Good afternoon! I am trying to create an eye-catching Services page for my website, and I am using the Collage Image block. At present, each of the six service descriptions I've written all have the same bland grey background. I would like to be able to inject custom-css / potentially use code blocks to be able to make each of the grey boxes a different color matching my branding palette. Would someone be able to give me some assistance in doing this? Thanks so much, William, Founder, Ayuda Foundation

Site URL: https://www.careershubluton.co.uk/gatsby-benchmarks/benchmark-1-a-stable-careers-programme Hello, I want to know if it is possible to change the background colour of a single text blog. Is this possible in any way? I want the chosen text block to ahve the following background colour: #E8B463 / R232 G180 B99 / C10 M32 Y68 K0 Thank you

I'm looking to change the color of just 2 words in a heading. How can one do this? (I see markdown in version 7 but not 7.1)

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?

Hi friends, I am trying to trigger my navigation to change color after scrolling past the hero. Is there a way I can trigger the change by div or pixel? I currently have my nav as a sticky nav and want to keep that. this is what I'm working with. /*sticky nav https://forum.squarespace.com/topic/142732-brinekeene-sticky-navigation/#comment-184292*/ Header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; } // fix mobile nav .Mobile-bar--top { position: fixed; top: 0; left: 0; right: 0; background: #173d56; } .Mobile-bar { position: fixed; z-index: 99999; } // move mobile overlay down .Mobile-overlay-menu-main { padding-top: 80px; } any help would be GREATLY APPRECIATED link to site

Hi, I would like to apply the layout of the image attached to my website. What would be the best way to do this and how? So I need 3 blocks with an image and text, they need to be side by side, and each of them needs to have a different background color. Thank you for any help you can give!! I'm using Squarespace 7.1 if that matters.

Site URL: https://www.chrispcreations.com/ads#/jdholiday/ The light box description font is difficult to read. I tried to change the description font color to white by putting the following code into the specific page's advanced settings: <style> div.sqs-gallery-block-grid .meta .meta-description p { color: hsla(0, 0%, 0%, 1); } </style> Didn't work—is there a way I can make the description font white, or the hover overlay 100% opacity?

Site URL: http://www.therockheath.org I want the text to remain in my header. I just want to remove the background color. How do I do that?

Hi, I'm using the foster template, but have changed the background color to black. I'm trying to change the dropdown menu background color from white to black as well. I've tried updating the site style as well as the css to: /* Change dropdown menu background */ .header-nav-folder-content { background: #000000 !important; } Nothing changes. Here is a link to my site https://hexahedron-lavender-ctl5.squarespace.com/. Would appreciate any help.

Could someone assist me. I am trying to assign colors to the text on a single page using the CSS code editor and im not sure why it isn't working. To my knowledge i have it formatted correctly as shown in the screenshot However, when I go to view the page, the only text that has changed colors is the paragraph text. Even more interesting, the H2 font at one point was a different color, but has returned to the default. Thinking I'm making some obvious mistake I cant see. Any help would be appreciated!

Hello. First things first, I'm extremely, HUGELY ignorant abour codification. But I have my website almost finished and I don't want to call a designer after I managed to solve every single question I had along the way (which I assume are very silly questions but an endeavor I'm very proud of). My website has became a sort of a hobby and like all hobbysts I want it all to myself. As a matter of fact, is not a very complex website. It's more photograph album family. Had it been professional or with intention to monetize I'd called the designer hands down. But in the last inch of the field I came across the dreaded codification... I just want to put in some pages (not all of them) two buttons with different color, say blue and green one on top of the other. In some pages there'll be several of these couples of buttons, in some just one couple, in some just one button, in some none at all. In my ignorance, I'm assuming it's an easy piece of code I can insert in the CSS editor in the Design module. But of course, if it's too hard I don't want to abuse anybody asking for something very expensive in the market. Can you help me or should I remove completely this feature of the album? Regards.

My home page image is a photo that has a logo and type overplayed on top. The logo and type are pure white. When I import this image into Squarespace, the logo and type appear light gray. I've tried saving the image as a JPG and PNG – same result. Any ideas?

Just looking to change the color for the text in a product form that pops up when adding a product to the cart.