Squarespace provides users with multiple color sections that can be applied to various parts of a page for creating a dynamic appearance of pages.
Your main logo might normally reverse on photos in the header section, but sometimes a different colour could add visual interest and be better suited for blog pages or specific sections. With some CSS manipulation this is easily achievable.
Change the Header Background
No matter which template you select for creating your site, its default color theme will dictate what colors will be applied to things such as headers and 404 pages. Altering this default theme can be done either using Squarespace 7.0/7.1’s Style Editor, or by adding CSS code.
Change the background color of your header in the Header section of Page Builder by clicking on the paint brush icon at the top. This will take you into the Page Design editor where you can choose between Solid, Gradient or Theme backgrounds.
If your page features a hero image, a header background that overlays it can be selected; however, when setting your header to Solid or Theme and featuring a gallery image in its first section on the page as its header background it won’t remain transparent over it.
When designing websites with long scrolling pages, one popular trend is for different sections to have different backgrounds. This way, you can draw attention to certain areas or highlight important content and call attention to it using Page Header Code Injection feature in Advanced settings of each page.
Change the Header Color
The header is one of the most crucial components of a Squarespace website, as it should reflect both your branding and function easily for visitors. In this post we’ll go through making some simple adjustments using CSS that center align your logo, change its color to black, and dynamically overlay on hero images when scrolling.
For our example, we will utilize a page using Squarespace EU Cookie Banner plugin (which you can install following this tutorial). Current guidelines suggest that website owners provide clear and prominent disclaimers that explain how cookies are being used on their sites.
Squarespace Cookie Banners typically feature a white background with a blue icon on top, which may present issues when trying to match up the banner with reverse images such as photo backgrounds. As I recently learned, this may also create challenges if you need to colorize or customize the header accordingly for certain pages.
Fixing this problem with CSS should be quite easy. First step in solving it should be identifying what version of Squarespace your site is running on; for Business or Commerce plans this information will be found under Edit Site > Advanced in your dashboard.
Change the Header Text
Squarespace header text can make a significant impactful statement about your brand or business, so its importance cannot be overstated. Easy reading text should complement branding goals while remaining easy for visitors to read – there are even ways you can alter its color within Squarespace!
One way is to use custom CSS code, which works across all versions of Squarespace without needing template tags. To create one, go into Advanced settings of a page and click ‘Page Header Code Injection’; add any desired snippets into this box before saving.
Another effective method for changing header text is through background colors. This works with all versions of Squarespace except 7.1 and does not require using page tags. To change it, access Advanced settings of a page then Page Header Code Injection then paste your desired color into its box.
Hex code can also be used to alter header text colors without needing an Spage tag. To change its background color, visit Advanced settings of any page and open “Page Header Code Injection”, click ‘Manage Custom Files’ then upload and click on your replacement logo from within ‘Manage Custom Files’ before inserting its URL where your cursor currently sits between quotation marks.
Change the Header Icon
Add a bit of style to your Squarespace navigation bar and header by customizing its colors quickly and easily – this works on all templates!
While visitors navigate down your site, a standard dropdown menu can sometimes become hidden behind scrolling pages, making it hard for them to locate what they need. By making small tweaks to the Squarespace navigation bar customization feature, you can create a more visually appealing and functional dropdown that keeps visitors engaged and interested.
One of the challenges associated with Squarespace is its templates not offering white backgrounds for logos and other elements, but there is a solution if this becomes an issue: custom CSS can display different logos on pages that do not match your color palette.
This method works for all templates, but is especially beneficial on Brine and Bedford 7.1 and later templates that have flexible design capabilities such as Brine or Bedford 7.1+. In order to use it effectively on these sites, a logo image with different color palettes would be useful and an understanding of Squarespace site styles and color themes would also be essential.
