Squarespace Customization: How To Add A Custom Background To Your Site Navigation

Squarespace Customization: How To Add A Customer Background To Your Site Navigation --> Click through for full post!

Hiiii. I'm back with another cute customization for your Squarespace website!

Today I'm working in the Brine template family* to show you a quick way to snazz up your site navigation  (go here to see if your template is in this family)!

It's cute! It's quick! It's gonna make your site have way more personality! This is gonna be fun!

Here's an example of a navigation I customized for a recent client of mine, Fine & Dandy.

Their branding was done by some cool buds of mine back in Jackson who incorporated this charming little border throughout most of the project's print work. We decided to weave it into the site's navigation to help tie all experiences with F&D together, whether in-person or online.

Here’s the code we’ll be using for this customization:

.tweak-site-width-option-full-background .Header-inner, section#logo-top .Index-page-content {
background: url("IMAGEURLHERE.jpg";

You'll copy this code into your Custom CSS panel (Design > Custom CSS) then follow the steps below to customize the background:

  • Then you'll delete "/s/IMAGE-FILENAME-HERE.jpg".

  • Type two quotation marks back in ("") then place your cursor in between the two marks.

  • Scroll down to "manage custom files", click through then click "add images or fonts".

  • Find the image you want to use for your background then select open.

  • After it uploads, click the thumbnail image. It should fill in a file name where your cursor was.

  • You may need to resize or adjust your image (using something like Photoshop or an online photo editor) to help you properly position your background.

  • You can also adjust the height of your navigation inside of the style editor (Design > Style Editor) for further tweaking.

  • As for the design of your background, make sure you're using something that offers enough contrast against any text that will appear above it. For instance, use a dark or bright background image if your logo and navigation text are lighter, or a light background image if the logo and text are darker. Try to avoid mixing colors that are similar in tone (like light on light or bright on bright).

Extra note: This code only adds a custom background to your desktop navigation. Your navigation will be replaced with a solid color bar on smaller devices. You can customize the color of this bar in your site's Style Editor (Design > Style Editor).

If you wanna browse more posts just like this, have a scroll through Some of these: