Change the style of your header in Squarespace 7.1 (new built-in features!)
Squarespace’s styling options have been somewhat limited in the 7.1 templates until now.
Before, you would have to use custom code to add a line or border under your nav bar, have a “frosted glass” effect, create a gradient behind your menu, or blur the background.
Now you can do all of these things with SQSP’s new built-in features! :)
Squarespace 7.1 now offers 4 different options for designing your header bar
The four styles you can choose from for styling your header are:
Solid
Gradient
Theme
Dynamic
Each style choice has slightly different features and capabilities, all of which I sample in the video tutorial below.
And yes, these are available in ALL templates, as long as you are using the most recent version of Squarespace.
To access the new header styles, you’ll head to:
Edit any page
Hover over your navigation bar & click ‘EDIT SITE HEADER’
Under the ‘Global’ options, select ‘Style’
Click the drop-down menu to explore the four options
You can also read through these changes in Squarespace’s support article here!
For a complete walkthrough on using & customizing the navigation bar in Squarespace 7.1, watch the video tutorial below!
TIMESTAMPS:
@0:00 - Intro
@0:29 - Setting your color themes
@1:24 - Accessing the new header styles
@2:13 - Using the 'Dynamic' style
@2:23 - Adding a border to the header
@3:00 - Creating a sticky header
@5:18 - Using the 'Theme' style
@6:05 - Using the 'Gradient' style
@7:44 - Using the 'Solid' style
@8:45 - Final notes
omg, how excited are you about these new features?!
If you haven’t signed up for Squarespace yet, you can browse through their templates here (affiliate link) and begin a two-week trial. After your trial is up, use my code BEJ10 for 10% off!
Comment below with any questions you have about the new header styles - I’m here to help!
More posts you might like:
How to change the Squarespace line block’s color and width in versions 7.0 & 7.1, video tutorial
Why you need a custom Error 404 Page & how to set one up in Squarespace, with 15 creative examples
How to browse all the fonts that are available inside Squarespace 7.1
Squarespace Personal vs. Business plan - features & pricing comparison
