How to Split Your Header Navigation in Squarespace

How to Split Your Header Navigation in Squarespace for a Unique Look

Hey there, Squarespace creators! Want to give your website's header a distinctive, eye-catching look? Splitting your navigation items around your logo can create a really sophisticated and custom feel. While Squarespace doesn't offer a built-in "split nav" option, a little bit of Custom CSS can get you exactly where you want to be.

This is a quick and warm guide to achieving that split header navigation. Let's dive in!

Why Split Your Navigation?

Splitting your navigation essentially places some menu items to the left of your logo and others to the right. This design choice can:

• Highlight your brand: By centering your logo within your navigation, it becomes a focal point.

• Improve aesthetics: It can create a more balanced and visually appealing header.

• Offer a unique user experience: It sets your site apart from the standard left or right-aligned menus.

The Code You'll Need

Here's the CSS snippet that will help you achieve this. I'll explain what each part does below:

---

//SPLIT HEADER NAV//
.header-nav {
    position: absolute;
    bottom: 0;
    margin-top: 0!important;
    margin-left: 0px!important;
}

.header-nav-item:nth-of-type(2) {
    margin-right: 20rem!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}

How to Implement the Code

1. Access Custom CSS:

   • From your Squarespace dashboard, go to Design.

   • Click on Custom CSS.

2. Paste the Code:

   • Copy and paste the entire CSS snippet provided above into the Custom CSS window.

3. Understand and Adjust (If Needed):

   • .header-nav: This positions your navigation bar absolutely at the bottom of its container, removing any default margins that might interfere.

   • .header-nav-item:nth-of-type(2): This is the magic line that creates the split!

     • :nth-of-type(2) targets the second navigation item in your list.

     • margin-right: 20rem!important; adds a large margin to the right of this second item, pushing the subsequent items further to the right, effectively creating the "split" around where your logo would typically sit.

     • Important: You might need to adjust 20rem based on your logo size and the number of navigation items you have. Experiment with this value until your navigation looks perfectly split around your logo.

   • .header-title-logo a: This ensures your logo remains visible and clickable, placing it above other elements if there's any overlap.

4. Save Your Changes: Click Save in the top left corner of the Custom CSS window.

A Few Friendly Tips:

• Preview as you go: As you adjust the margin-right value, keep an eye on your website's preview to see the changes in real-time.

• Consider responsiveness: Test your site on different screen sizes (desktop, tablet, mobile) to ensure your split navigation looks good everywhere. You might need media queries for perfect mobile responsiveness, but for a simple split, this code is a great start.

• Backup your CSS: Before making significant changes, it's always a good idea to copy your existing Custom CSS somewhere safe.

And there you have it! With just a few lines of CSS, you can transform your Squarespace header navigation into something truly unique and professional. Enjoy your beautifully split header!