5 Ways to Customize Your Navigation Menu in Squarespace 7.1
How to Customize Your Navigation Menu in Squarespace 7.1!
Giving a different look to your Squarespace website can be as simple as making some simple tweaks here and there. Today, we’re sharing 5 very simple ways you can style your Squarespace navigation menu, and give your website a completely different look.
Let’s begin!
5 Ways to Customize Your Navigation Menu in Squarespace 7.1
1. Change the Navigation Menu Appearance
OPTION 1: CHANGE THE FONT
You can change the navigation menu font by:
Go to Design > Site Styles > Fonts
Select Assign Styles > Site Navigation
Change the style to Custom
Choose the font, weight, style, spacing, and size
OPTION 2: CHANGE THE COLOR
In Squarespace 7.1 you have 4 options to choose from when changing the color of your navigation menu: Solid, Gradient, Theme, and Dynamic.
Solid and Gradient Headers: You can style opacity, background color, navigation color, blur background, border, and drop shadow.
Theme Headers: Theme headers use the color of the theme you have. To change the menu navigation color to a different color from your theme’s colors, you have to go to the Theme Editor and change the theme’s color.
Dynamic Headers: Dynamic headers will use the theme of the first section on each page. Go to Design > Site styles > Colors to customize the color of the site title and navigation link for each theme.
You change the navigation color by:
1. Go to Edit Site Header > Style
2. Choose from Solid, Gradient, Theme, and Dynamic headers
3. Style as you wish
2. Edit the Site Header Settings
To fully customize your navigation menu, you can choose to make global, desktop, or mobile changes.
Global
Click Edit Site Header > Global
In Site title & logo, you can change your site title, and upload your logo for desktop and mobile
In Elements, you can add a button, choose to hide or show your social icons, language switch, and add a shopping car.
Desktop
Click Edit Site Header > Click the monitor icon
In Header Layout, you can choose the layout of your navigation menu for desktop and laptop devices.
You can change the Width of the social icons, cart, and button.
You can change the Vertical Padding which allows you to adjust the space above and below your header.
You can change the Element Spacing which allows you to adjust the distance between your navigation items and social icons, button, or cart.
You can change the Link Spacing which allows you to adjust the space between each navigation item.
You can change the Flag Size which allows you to adjust the flag size used on your website (if applicable).
Mobile
Click Edit Site Header > Click the phone icon
In Header Layout, you can select the layout of your navigation menu for mobile devices.
In Overlay Menu, you can choose the alignment of your navigation items, the spacing, and the colors.
In Menu Icon you can choose the type of “hamburger menu” you prefer.
3. Create A Fixed Header
Creating a fixed header is a very creative and simple way to customize your navigation menu. With this customization, you’ll keep your website header showing as your visitor scrolls down and up your website.
Here’s a step-by-step guide on how to create a fixed header on your Squarespace website: READ MORE HERE.
4. Customize The Pages in The Navigation Menu
You can easily reorder your navigation menu pages by going to Squarespace Main Menu and selecting Pages. Once you’re there you can see all the pages in your navigation under the MAIN NAVIGATION section. To reorder the pages you simply need to drag and drop them to change the order.
You can also add new pages to your navigation menu by clicking the plus (+) sign, or if you want you can choose to include pages from the NOT LINKED section to your navigation menu. To do this you just need to drag the pages from the NOT LINKED section to the MAIN NAVIGATION section.
5. Add a Drop Down Navigation Menu
Adding this feature to your navigation menu keeps the navigation menu clean and very user-friendly.
On our website, we choose to use a drop-down for our services because we offer multiple options. This way it’s easier for our visitors to go directly to the page they’re looking for.
Here’s a step-by-step guide on how to add a drop-down menu to your Squarespace website: READ MORE HERE.
Make Sure You Download Our Free Resources
Free Training “5 Effective Ways to Improve Your Online Presence”
Business Foundation Workbook
Brand & Style Workbook
Website Design Guide For Health, Wellness & Fitness Brands
Content Marketing Planner
Search Engine Optimization (SEO) Checklist
Final Thoughts
That’s it - 5 Ways to Customize Your Navigation Menu in Squarespace 7.1!
We hope this article was clear and straight to the point! We have no doubt that after reading this you’ll be able to customize your navigation menu on your Squarespace website.
Now it's your turn to tell us, after reading this article do you have any questions? Send us your thoughts, and any other concerns you might have, and we’ll do our best to answer them.
Want to start working on your online presence? Check out our free resources!
FIND THIS POST HELPFUL? YOU’LL ALSO LOVE THESE…
What is Squarespace? Everything You Need to Know Before Start Using It
Squarespace vs Shopify: Which One Is The Best And Which One To Choose?
