058: How to Create Double Top Navigation Layout in Squarespace

How to Create Double Top Navigation Layout in Squarespace

Some links in your top navigation are important but you may not want them to take prime real estate. You may want them to take a secondary position but still stay easily found by your visitors. 

How to create such a layout? Enter: the navigation bar above the top navigation. 

A double top navigation layout is a great way to separate out your links on the top of your site. This way you can create a visual distinction among your links and space out the links reducing navigation clutter. Watch the video below or follow the steps in the blog to create that look for your site on Squarespace.

1| Go to Design > Site Styles

Hover over the Secondary Navigation to pull up relevant settings. Under Header: Layout, look for “Secondary Nav Position”. Click to choose “Top Left”. This will create its own bar on the top.

2| Primary Nav Position: Bottom Right

Also under Header: Layout, look for “Primary Nav Position”. Select “Bottom Right”.

3| Reduce Padding

Under Header Bottom: reduce the padding to get the right spacing between the new top bar and the Site Title

4| Change color of the White Bar

Click on the white bar. The settings for Header:Top will now show up on in the sidebar panel. Under Background, select the color you want the bar to have.

5| Hit Save 6| Refresh the Page & you are done!


Show us what you’ve created!

That’s it, my dear friends! I hope you will try this layout effect for your site. If you do, I’d love to see it. Drop a link to your page in the comments and share what you’ve created!

Your Brand New Website!

Are you getting excited to get your own website? I love designing websites for fabulous people like yourself, so take action to get your website design process started —> Start the Conversation by sharing some ideas about your site with me and get a free 15 minute video consultation to discuss your website dreams.

Questions about this blog post? You can drop them in the comments below!

~Peace,

Sophia

Sophia Ojha

Web Design Services + ConvertKit Services + Biz Coaching for Web Designers + Weekly Blog & Video Tutorials

I (Sophia Ojha) am web designer and coach to web designers based in the Blue Ridge Mountains of North Carolina. I love to design websites for my clients via my Website-In-A-Day package or my Website-In-Two-Weeks package. I publish a weekly free newsletter called the Abundant Creative which includes blog articles and video tutorials on using Squarespace, ConvertKit and other online tools for online businesses. Also, I love teaching these platforms one-to-one to clients who can hire me for an hour for a quick crash-course on Squarespace or ConvertKit. I am also the founder of Millionaire Web Designer, a 12-month group coaching program that helps web designers build a successful and spacious web design business.

To ask me about any of these, drop me a line via: Contact page.
Receive invites to events and new content: Abundant Creative Newsletter
Find a web designer for your next project: Millionaire Web Designer Directory

www.millionairewebdesigner.com | www.sophiaojha.com

Previous
Previous

059: How to Activate Cart Icon in Your Top Navigation in Squarespace

Next
Next

057: How to Change the Background Color of an Index Section