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