How to easily customise your website navigation bar on Squarespace
Do you want to change the style of your website header section? This is the bar at the top of your website that features your logo, menu navigation, and often social links (in the image below it is the purple bar).
There is a super quick and easy way to customise the look of your site header, and this video will show you how.
Solid
The solid option allows you to choose a block background colour either from your existing colour palette, or you can choose a custom colour using the hex code, or colour picker. Additional customisations are adjusting the opacity of the colour, changing the text colour and adding a border and/or drop shadow.
The image above is an example of a solid background with bottom border.
Gradient
This option adds a subtle colour gradient from the top of the site header section. You can choose either a custom colour, or one from your existing colour palette. The opacity can be adjusted, and a border and/or drop shadow added too. An example can be seen in the image below.
Theme
As the name suggests, this option allows you to choose the colour theme of the site header. Just be aware if using this option that your site header is site wide, so the theme will stay they same regardless of the page. If you would like the theme to change depending on the theme of the pages first section, check out the dynamic option.
Dynamic
The dynamic option has a transparent background, but the site title (if used instead of a logo) and navigation links will change colour depending on the colour theme of the first section. This means that dark backgrounds will have light colour text and vice versa.
Border & Drop shadow
Borders can be added to all options apart from Theme, and drop shadows to all bar Theme and Dynamic.
The border can be fully customised, including adjusting the thickness, colour and which sides it is applied too. I’m really loving applying a thin border to the bottom of the site header at the moment!
The colour and opacity of drop shadows can also be adjusted to give extra definition to the site header.
Desk top view
In addition to changing the style of the header section, by clicking on the desktop icon you can also change the layout - moving the position of your logo and navigation links. Plus, you can choose if you would like the header to be fixed (always visible when scrolling), appear on scroll or un-toggle the fixed option so the header will stick at the top of the page and disappear from view when scrolling down the page.
