Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Hi there,

I am looking to customise my navigation bar with code-injection, however I know nothing about code. I plan to learn, but for the sake of getting my website up and running I was hoping someone could talk me through it.

I have attached two images. As you can see my navigation bar links are white on my homepage due to the dark banner image I have chosen. I have had to make the header grey so that the links are visible on the rest of my website. However I would like the rest of my website to have an entirely white background, therefore I would like to make the navigation bar links black on all other pages. 

Any help would be much appreciated. 

Kind regards,
Chris Spencer



Share this post

Link to post

5 answers to this question

Recommended Posts

  • 1

Hi Chris.

It helps others provide suggestions and specific code solutions if we have a link to the site in question and/or the name of the template you're using (though a link is better). For sites in trial mode, set the site visibility and password and provide that as well. That makes it as easy as possible for coders here to look at the issue, write the code, test it, and post it here for you.


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post

Link to post
  • 0

You will using custom CSS to override the current styles being used.

Log in / Design / Custom CSS

Example: This value controls the text color :  color: rgba(255,255,255,.9); or #FFF which is white. the number 9 is transparency. If you wanted black you would do color: rgba(0,0,0,.9); or #000


<div class="collection">
              <a href="/our-projects">
                Our Projects

color: rgba(255,255,255,.9);

Override would be

go to your custom CSS panel in Squarespace and add this line of CSS code.

a.collection {color: #000;} or 
a.collection {color: rgba(0,0,0,.9); }

"a" stands for link
"." is a class
"collection" is the class name

The best way to figure things out is to use Chrome as your browser and right mouse click on a element that you want to change and choose "Inspect" this will pull up the developer console available within the Chrome browser. 

You will need to learn a bit of simple CSS and html. but this should give you a start.




Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...