How to create a split navigation in Squarespace 7.1 // Split website menu layout in Squarespace 7.1
In this tutorial, you’ll learn how to use CSS to create a split navigation so that half of your website links are on the left of your website title or logo, and the other half are on the right.
To be clear, we’re making some layout changes here, and it wont be perfect! here are a few pro tips before you dig into the code:
→ You’ll need to remove all of the elements: icons, cart, button, etc
→ An even number of links is recommended
→ You will need to remove the code to adjust your site title/logo
→ You need to set your layout to the last design option that will center your logo. The links in your navigation will go under the logo, and we will move them with CSS. In edit mode, select edit site header, then select edit design, and choose the layout with the logo in the center and the links below it (last option)
→ You’ll also need to be careful about the size of your menu. This code is written for my logo and my menu link font sizes, but you might need to adjust the 1030px for your own design needs. I’ll show you how to do this in the video
You’ll find the code from this tutorial below. Make sure you have the right layout selected, you’ve removed extra elements like your cart or button, and adjust the bold values below so this code will work for the size of your navigation font. You’ll also need to update the number in the nth-of-type(#) part of the code to be the correct count for your links. If you have 4 links, leave that number at 2. If you have 6 links, change it to 3 and so on.
Every site can be different and you’ll need to customize your code to make this work for you!
@media only screen and (min-width: 1030px){
.header-nav {
position: absolute;
margin-top:0!important;
top: 2rem;
}
.header-nav-item:nth-of-type(2) {
margin-right: 50vw!important;
}
.header-title {
z-index: 99!important;
}
}
- - -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ https://buymeacoffee.com/insidethesquare
- - -
👩💻 New to code? Start here → https://insidethesquare.co/learn
- - -
📑 Get access to my collection of CSS codes for Squarespace at https://insidethesquare.co/css
- - -
🙋 Need some help? Visit https://support.squarespace.com to reach their official support team
- - -
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → / thinkinsidethesquare
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → https://insidethesquare.co/inside10
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
Watch video How to create a split navigation in Squarespace 7.1 // Split website menu layout in Squarespace 7.1 online without registration, duration hours minute second in high quality. This video was added by user InsideTheSquare with Becca Harpain 23 January 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,275 once and liked it 71 people.