How to change your main menu layout in Squarespace 7.1

On this page, you’ll find two tutorials about the header of your Squarespace website.

The first covers your design options, and the second is an overview of different layout styles. you can use to place your logo, menu, and header elements in different locations.

This tutorial is for the latest version of Squarespace and does not apply to legacy sites built on older versions. To learn more, visit insidethesquare.co/themes

Your website header is a global element - visible on every page - so it better look good!

In this video, you’ll learn how to use the build in designs available in Squarespace, like drop shadow and border options, so your header looks amazing.

Here is a recap of your four design options:
[solid] you can assign specific colors and have opacity, blur, border, and drop shadow options
[gradient] you can assign specific colors and have opacity, blur, border, and drop shadow options [theme] assign a color theme to be used on every page
[dynamic] header color theme will be the same as the first section


In Squarespace 7.1, you can chose different header layouts that will place the site title/logo, links, and header elements like the social icons and button in different places inside your header.

You can also adjust mobile separately, and this tutorial video is a quick overview of exactly how to do it!

To reach both of these options, hop into edit mode from any page on your site and hover over the header until you see the button that says [edit site header]

Click on that to open your header menu.

Click on the desktop monitor icon and select header layout to see your options there.

To change up the mobile layout, click on the mobile phone icon and select header layout to change the layout for the mobile version of your site.

When you are all done select save and you will be good to go!

If all you want to do is change your main menu text, check out this tiny tutorial instead.

insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

Learn CSS for Squarespace in my free class:
→ insidethesquare.co/learn

https://insidethesquare.co
Previous
Previous

How to change your page section color theme in Squarespace

Next
Next

How to copy a page section in Squarespace