Editing your website’s header & footer navigation

A quick walk-through on how to change header & footer navigation links and layout on your Squarespace 7.1 website!

For more information, PLEASE see this documentation from Squarespace.

VIDEO TRANSCRIPT

Your website header and footer are the primary spots that your site visitors use to navigate your site. In this video, I'll show you how to update all of your links and navigation stylings for both your Header and Footer on desktop and mobile.

Let's go!

 We'll start with changing our site header. Firstly, if you want to change the order in which these items are displayed in your header, you can go to Pages, and you can change the order by clicking and dragging the items, and you'll see it's automatically switched the order of these.

When you're creating new pages, you can either add them to your main navigation automatically, or add them to your not linked section, in which case they won't show up in any of your navigation items. To move a navigation item from your not linked section to your header navigation, you can simply click it, drag it to wherever you'd like it to be placed, and it'll automatically be linked to your header navigation.

You'll see, for example, in this instance, because this template has a couple different contact page options, if we decide we want this in our navigation, but we want it to just be called our contact page, we don't want this number indication, you can just double click on this, and then just delete that, and now our link title has been changed.

To customize our header, we'll go into Edit, Edit Site Header, and then this is where we can change the style and the look of our header.

For example, if we decide that we actually don't want a button in our navigation, we can click Elements, and then toggle the button option off. Same thing, if you don't have a button and you want to add it, you can toggle it on. Add the text here. And then add your link as well.

We also have the option to add social links by just clicking this toggle. You can edit social links and then just add the link directly to your social media account. Just for example, I'll just do the general Instagram link. And you'll see the icon is automatically populated.

And then we'll see this is automatically updated. We can change the size of it. And then we can also change how we'd like the border to be displayed.

We'll also want to make sure that we're updating our mobile view as well. So we'll go back into edit site header and then switch over to mobile. You can also change the layout of your desktop header as well, like adding padding to the sides and changing the overall layout of our logo compared to our links.

Please be advised though with some of the templates. Your header has been customized with CSS code, so try to avoid changing the header layouts because this could end up causing some glitches

for our mobile version. We'll go into overlay menu, and this will show us our mobile options. You can change the alignment of your links, and then you can also change the spacing between them as well. You can change the color of your mobile menu by pressing this button, and you can actually update the theme,

you can change the color options by going back into your site styles and clicking on your color panel and re opening this page in mobile view.

To customize your footer, you'll just hover and press edit footer. The links in your footers are typically just paragraph text. with added link buttons.

To change these, you'll simply double click the text, and then change the link. You can always write new text, and add new links. To keep your site styles the same, make sure that when you're adding new text, it's just copying the same style as the previous one.

So you see, for example, this automatically started writing in paragraph 2. But the rest of our links are Paragraph 1. So let's just double click that, change it to Paragraph 1, and then add a new link.

You'll also want to add your site terms and your site privacy policies. These are really important legal documents for your website, And no matter how small your business is, you need them.

If you Google website term and privacy policy templates, you'll come up with a bunch of free options as well as some inexpensive paid options for generating templates that you can use on your site. Just to be safe, always consult with a lawyer to make sure that all the verbiage that you're using within your terms and privacy policies are accurate and legal.

You'll also want to add your copyright at the bottom with the current year, and also your legal business name, so typically your LLC.

To move things around in your footer, we'll use the same method that we do for any of our other sections. We can just click and drag any of our text and move it wherever we'd like.

Once we've made all the changes that we want, click save as usual and you're all set.