MODULE 2: HEADER, FOOTER & NAVIGATION
Welcome to Module 2! Now that your global colors and fonts are set, it’s time to make this website officially yours. In this lesson, we are going to add your business logo to the header and upload a "Favicon" (that tiny, super-important icon that shows up in your browser tab).
Here is how to get your branding plugged in:
Step 1: Uploading Your Main Logo
Open your website preview and hover your mouse over the very top area of the page.
A button will appear that says EDIT SITE HEADER. Click that!
A menu will pop up. Click on Site Title & Logo.
Here, you can drag and drop your logo file into the upload box.
(Don’t have a logo yet? No problem at all! You can simply type your business name into the "Site Title" box, and Squarespace will display it beautifully using the fonts we set up in Lesson 6).
Step 2: Sizing Your Logo
Once your logo is uploaded, you might notice it looks a little too big or too small.
Right below the upload box, use the Logo Height slider to adjust the size until it looks perfectly balanced on your desktop view.
Important: Click on the Mobile Logo Height slider below that to adjust how big your logo looks specifically on mobile phones!
Step 3: Adding Your Favicon (Do Not Skip This!)
A "favicon" is the tiny little icon that appears in the browser tab next to your website's name. It is a small detail, but it is the #1 thing that separates amateur websites from highly professional ones!
Here is how to add yours:
Make sure you hit SAVE to exit the page editor.
Go back to your main left-hand dashboard menu.
Click on Settings, then click on Website, and finally click on Favicon (sometimes labeled as Browser Icon depending on your Squarespace version).
Upload your icon image here and hit Save.
💡 DESIGNER SECRETS FOR LOGOS & FAVICONS:
Use Transparent PNGs: Make sure your main logo is saved as a .PNG file with a "transparent background." If you use a .JPG, your logo will have a white box behind it, which won't look great if your website header is a different color!
Keep the Favicon Simple: Because the favicon is so incredibly tiny, a full written logo will be completely unreadable. Use a simple graphic, a single initial, or a brand symbol (it should be a perfect square, like 500x500 pixels).
Give it Time: When you upload your Favicon, it might not show up in your browser tab immediately. Sometimes browsers cache the old icon, so give it a few hours (or check on a different device) to see the magic happen!
Looking great! Now that your branding is stamped at the top of your site, let's head over to Lesson 9: Managing Your Navigation Menu to set up your page links!
Here is how to get your branding plugged in:
Step 1: Uploading Your Main Logo
Open your website preview and hover your mouse over the very top area of the page.
A button will appear that says EDIT SITE HEADER. Click that!
A menu will pop up. Click on Site Title & Logo.
Here, you can drag and drop your logo file into the upload box.
(Don’t have a logo yet? No problem at all! You can simply type your business name into the "Site Title" box, and Squarespace will display it beautifully using the fonts we set up in Lesson 6).
Step 2: Sizing Your Logo
Once your logo is uploaded, you might notice it looks a little too big or too small.
Right below the upload box, use the Logo Height slider to adjust the size until it looks perfectly balanced on your desktop view.
Important: Click on the Mobile Logo Height slider below that to adjust how big your logo looks specifically on mobile phones!
Step 3: Adding Your Favicon (Do Not Skip This!)
A "favicon" is the tiny little icon that appears in the browser tab next to your website's name. It is a small detail, but it is the #1 thing that separates amateur websites from highly professional ones!
Here is how to add yours:
Make sure you hit SAVE to exit the page editor.
Go back to your main left-hand dashboard menu.
Click on Settings, then click on Website, and finally click on Favicon (sometimes labeled as Browser Icon depending on your Squarespace version).
Upload your icon image here and hit Save.
💡 DESIGNER SECRETS FOR LOGOS & FAVICONS:
Use Transparent PNGs: Make sure your main logo is saved as a .PNG file with a "transparent background." If you use a .JPG, your logo will have a white box behind it, which won't look great if your website header is a different color!
Keep the Favicon Simple: Because the favicon is so incredibly tiny, a full written logo will be completely unreadable. Use a simple graphic, a single initial, or a brand symbol (it should be a perfect square, like 500x500 pixels).
Give it Time: When you upload your Favicon, it might not show up in your browser tab immediately. Sometimes browsers cache the old icon, so give it a few hours (or check on a different device) to see the magic happen!
Looking great! Now that your branding is stamped at the top of your site, let's head over to Lesson 9: Managing Your Navigation Menu to set up your page links!
8. Adding Your Logo & Favicon
ow that your logo is shining at the top of your site, let’s make sure your visitors can actually find their way around!
Your Navigation Menu (the list of links at the very top of your website) is the roadmap for your visitors. Squarespace makes it incredibly easy to add new pages, rearrange the order, and even create drop-down folders.
Here is how to organize your menu:
Step 1: Open the Pages Menu
Go to your main Squarespace dashboard.
Click on Website (or Pages, depending on your Squarespace version).
Step 2: Main Navigation vs. Not Linked
When you open this menu, you will see two very important sections:
Main Navigation: Any page listed in this section will automatically show up as a clickable link at the top of your website.
Not Linked: Pages in this section are still "live" on your website, but they are hidden from the main top menu. This is the perfect place to put your legal pages (like Privacy Policy), hidden landing pages, or pages you are still working on drafting!
Step 3: Rearranging Your Links
Want your "About" page to show up before your "Services" page? Easy!
Simply click and hold the title of the page in the left-hand panel, and drag and drop it into the exact order you want. Your live website preview will update instantly to reflect the new order.
To hide a page from the menu, just drag it down into the Not Linked section.
Step 4: Creating Drop-Down Folders
If you have multiple services or products, you might want to group them together under one drop-down menu so your header doesn't look cluttered.
In the Main Navigation section, click the Plus Icon (+).
Scroll down and click on Folder (or Drop-down).
Give the folder a name (like "Services" or "Shop").
Now, simply drag and drop your existing pages into that new folder. When a visitor hovers over "Services" on your live site, a beautiful drop-down menu will appear!
💡 DESIGNER SECRETS FOR A PERFECT MENU:
Keep It Clean: A confused mind says "no." Try to limit your Main Navigation to 3 to 6 essential links. If you have 10 links at the top of your site, visitors will get overwhelmed. Move less important links down to the Footer!
Be Clear, Not Clever: Name your pages exactly what they are. Use "About," "Contact," and "Services." Avoid overly clever names like "My Journey" or "Let's Connect," as visitors (and Google) might not instantly know what those pages are for.
The "Home" Link is Optional: Most users know that clicking your main Logo will automatically take them back to the Home page. If you need more space in your menu, you can safely drag your "Home" page down to the Not Linked section!
Your Navigation Menu (the list of links at the very top of your website) is the roadmap for your visitors. Squarespace makes it incredibly easy to add new pages, rearrange the order, and even create drop-down folders.
Here is how to organize your menu:
Step 1: Open the Pages Menu
Go to your main Squarespace dashboard.
Click on Website (or Pages, depending on your Squarespace version).
Step 2: Main Navigation vs. Not Linked
When you open this menu, you will see two very important sections:
Main Navigation: Any page listed in this section will automatically show up as a clickable link at the top of your website.
Not Linked: Pages in this section are still "live" on your website, but they are hidden from the main top menu. This is the perfect place to put your legal pages (like Privacy Policy), hidden landing pages, or pages you are still working on drafting!
Step 3: Rearranging Your Links
Want your "About" page to show up before your "Services" page? Easy!
Simply click and hold the title of the page in the left-hand panel, and drag and drop it into the exact order you want. Your live website preview will update instantly to reflect the new order.
To hide a page from the menu, just drag it down into the Not Linked section.
Step 4: Creating Drop-Down Folders
If you have multiple services or products, you might want to group them together under one drop-down menu so your header doesn't look cluttered.
In the Main Navigation section, click the Plus Icon (+).
Scroll down and click on Folder (or Drop-down).
Give the folder a name (like "Services" or "Shop").
Now, simply drag and drop your existing pages into that new folder. When a visitor hovers over "Services" on your live site, a beautiful drop-down menu will appear!
💡 DESIGNER SECRETS FOR A PERFECT MENU:
Keep It Clean: A confused mind says "no." Try to limit your Main Navigation to 3 to 6 essential links. If you have 10 links at the top of your site, visitors will get overwhelmed. Move less important links down to the Footer!
Be Clear, Not Clever: Name your pages exactly what they are. Use "About," "Contact," and "Services." Avoid overly clever names like "My Journey" or "Let's Connect," as visitors (and Google) might not instantly know what those pages are for.
The "Home" Link is Optional: Most users know that clicking your main Logo will automatically take them back to the Home page. If you need more space in your menu, you can safely drag your "Home" page down to the Not Linked section!
9. Managing Your Navigation Menu
Your pages are in order, but what if you want to change how the top of your website actually looks? Maybe you want your logo in the center instead of on the left, or maybe you want a big, eye-catching "Book Now" button right next to your menu!
Squarespace gives you a ton of control over the header layout. Here is how to make it your own:
Step 1: Open the Header Editor
Go to any page on your website and click the EDIT button in the top left corner.
Hover your mouse over the very top area of your site until you see the EDIT SITE HEADER button pop up. Click it!
Step 2: Choose Your Desktop Layout
In the menu that appears, click on Design (or Desktop, depending on your version).
Click on Header Layout.
Here, you will see several different layout options. Click through them to see how they look! You can have your logo on the left with links on the right, everything centered perfectly, or the logo stacked on top of your menu.
Pick the one that fits your brand best!
Step 3: Adding Elements (Buttons & Social Links)
Want to add a call-to-action button or your Instagram icon to the header?
Go back to the main Header menu and click on Elements.
Add a Button: Toggle the "Button" switch on. You can change the text (e.g., "Work With Me" or "Buy the Course") and paste the link to your checkout page or contact form.
Add Social Links: Toggle the "Social Links" switch on. Click "Edit Social Links" to paste the URLs to your Instagram, Pinterest, or YouTube channel. Squarespace will automatically add the correct icon!
Step 4: Header Background & Transparency
You can also change the color of the header block itself!
In the Header menu, click on Design and then Color.
You can choose a solid color theme (using the palette we set up in Lesson 5).
Transparent Header: If you want your main website background image to show through the header (so your logo looks like it's floating on the picture), toggle the Transparent switch to ON.
💡 DESIGNER SECRETS FOR THE HEADER:
The "Fixed" Header: Want your menu to "stick" to the top of the screen as people scroll down your page? In the Header Design menu, look for the Fixed Position toggle and turn it on. This is great for keeping your "Buy Now" button always visible!
Check the Mobile Layout! Just like the rest of Fluid Engine, you need to check the mobile version of the header! In the Header menu, click on the Mobile tab. You can choose a different layout for phones and even change the style of the "Hamburger Menu" (the three little lines that open the menu).
Header looking sharp? Don't forget to hit SAVE in the top left corner! Let's wrap up Module 2 by heading to the bottom of your site in Lesson 11: Customizing the Footer.
Squarespace gives you a ton of control over the header layout. Here is how to make it your own:
Step 1: Open the Header Editor
Go to any page on your website and click the EDIT button in the top left corner.
Hover your mouse over the very top area of your site until you see the EDIT SITE HEADER button pop up. Click it!
Step 2: Choose Your Desktop Layout
In the menu that appears, click on Design (or Desktop, depending on your version).
Click on Header Layout.
Here, you will see several different layout options. Click through them to see how they look! You can have your logo on the left with links on the right, everything centered perfectly, or the logo stacked on top of your menu.
Pick the one that fits your brand best!
Step 3: Adding Elements (Buttons & Social Links)
Want to add a call-to-action button or your Instagram icon to the header?
Go back to the main Header menu and click on Elements.
Add a Button: Toggle the "Button" switch on. You can change the text (e.g., "Work With Me" or "Buy the Course") and paste the link to your checkout page or contact form.
Add Social Links: Toggle the "Social Links" switch on. Click "Edit Social Links" to paste the URLs to your Instagram, Pinterest, or YouTube channel. Squarespace will automatically add the correct icon!
Step 4: Header Background & Transparency
You can also change the color of the header block itself!
In the Header menu, click on Design and then Color.
You can choose a solid color theme (using the palette we set up in Lesson 5).
Transparent Header: If you want your main website background image to show through the header (so your logo looks like it's floating on the picture), toggle the Transparent switch to ON.
💡 DESIGNER SECRETS FOR THE HEADER:
The "Fixed" Header: Want your menu to "stick" to the top of the screen as people scroll down your page? In the Header Design menu, look for the Fixed Position toggle and turn it on. This is great for keeping your "Buy Now" button always visible!
Check the Mobile Layout! Just like the rest of Fluid Engine, you need to check the mobile version of the header! In the Header menu, click on the Mobile tab. You can choose a different layout for phones and even change the style of the "Hamburger Menu" (the three little lines that open the menu).
Header looking sharp? Don't forget to hit SAVE in the top left corner! Let's wrap up Module 2 by heading to the bottom of your site in Lesson 11: Customizing the Footer.
10. Editing the Header Layout
We’ve perfected the top of your site, now let’s head down to the bottom! The Footer is the final thing a visitor sees before leaving your page, making it a critical piece of your website's real estate.
The footer is global, meaning whatever you build here will automatically show up at the bottom of every single page on your website.
Here is how to set it up:
Step 1: Open the Footer Editor
Go to any page on your website and click the EDIT button in the top left corner.
Scroll all the way down to the very bottom of the page.
Hover your mouse over the footer area and click the EDIT FOOTER button that pops up.
Step 2: Treating It Like a Normal Page
Good news! Because your template is built on Fluid Engine, the footer works exactly like any other section on your website. You have total drag-and-drop freedom here.
You can double-click text to change it.
You can drag and drop your logo into the section.
You can add a new block by clicking the "+" icon anywhere in the grid.
Step 3: What to Include in Your Footer
If you aren't sure what should go down here, here is a checklist of the essential footer elements:
Your Logo or Site Title: Remind them whose site they are on!
Quick Links: Add a text block and create a mini-menu linking to your most important pages (Home, About, Services).
Legal Links: This is where you must link your "Privacy Policy" and "Terms & Conditions" pages. (You can create these pages in the "Not Linked" section of your Pages menu).
Copyright Notice: Update the year and your business name (e.g., © 2024 Your Business Name. All Rights Reserved).
Social Media Icons: A great place to link your Instagram, Pinterest, or YouTube.
Step 4: Adding a Newsletter Block
The footer is one of the best places to capture email addresses!
Click the "+" to add a new block and choose Newsletter.
Drag it into place.
Double-click the block to connect it to your Squarespace Email Campaigns or a third-party service like Mailchimp (we will cover exact form integrations in Module 4!).
💡 DESIGNER SECRETS FOR THE FOOTER:
The "Junk Drawer" Rule: If a page is important but doesn't quite belong in your main top menu (like a Press page, FAQ, or Login link), the footer is the perfect place for it.
Make it Dark: Visually, it helps ground your website if the footer is a different color than your main page content. In Edit mode, hover over the footer section, click the Pencil Icon (Edit Section), go to the Colors tab, and select one of your darker themes!
Don't Forget Mobile! Remember the Golden Rule of Fluid Engine: Any time you add or move things in the footer on your desktop, you MUST click the Mobile Icon in the top right corner and arrange how the footer looks on phones!
Looking good? Hit SAVE in the top left corner!
Congratulations, you’ve officially finished Module 2: Header, Footer & Navigation! Your site's framework is fully built. Next up is the most exciting part—Module 3: Mastering the Page Builder, where we will finally start dropping your photos and text into the page!
The footer is global, meaning whatever you build here will automatically show up at the bottom of every single page on your website.
Here is how to set it up:
Step 1: Open the Footer Editor
Go to any page on your website and click the EDIT button in the top left corner.
Scroll all the way down to the very bottom of the page.
Hover your mouse over the footer area and click the EDIT FOOTER button that pops up.
Step 2: Treating It Like a Normal Page
Good news! Because your template is built on Fluid Engine, the footer works exactly like any other section on your website. You have total drag-and-drop freedom here.
You can double-click text to change it.
You can drag and drop your logo into the section.
You can add a new block by clicking the "+" icon anywhere in the grid.
Step 3: What to Include in Your Footer
If you aren't sure what should go down here, here is a checklist of the essential footer elements:
Your Logo or Site Title: Remind them whose site they are on!
Quick Links: Add a text block and create a mini-menu linking to your most important pages (Home, About, Services).
Legal Links: This is where you must link your "Privacy Policy" and "Terms & Conditions" pages. (You can create these pages in the "Not Linked" section of your Pages menu).
Copyright Notice: Update the year and your business name (e.g., © 2024 Your Business Name. All Rights Reserved).
Social Media Icons: A great place to link your Instagram, Pinterest, or YouTube.
Step 4: Adding a Newsletter Block
The footer is one of the best places to capture email addresses!
Click the "+" to add a new block and choose Newsletter.
Drag it into place.
Double-click the block to connect it to your Squarespace Email Campaigns or a third-party service like Mailchimp (we will cover exact form integrations in Module 4!).
💡 DESIGNER SECRETS FOR THE FOOTER:
The "Junk Drawer" Rule: If a page is important but doesn't quite belong in your main top menu (like a Press page, FAQ, or Login link), the footer is the perfect place for it.
Make it Dark: Visually, it helps ground your website if the footer is a different color than your main page content. In Edit mode, hover over the footer section, click the Pencil Icon (Edit Section), go to the Colors tab, and select one of your darker themes!
Don't Forget Mobile! Remember the Golden Rule of Fluid Engine: Any time you add or move things in the footer on your desktop, you MUST click the Mobile Icon in the top right corner and arrange how the footer looks on phones!
Looking good? Hit SAVE in the top left corner!
Congratulations, you’ve officially finished Module 2: Header, Footer & Navigation! Your site's framework is fully built. Next up is the most exciting part—Module 3: Mastering the Page Builder, where we will finally start dropping your photos and text into the page!
11. Customizing the Footer
