How to create a split navigation in Squarespace 7.1 with CSS

What’s a split navigation?

A split navigation is undoubtedly one of the most popular navigation layout styles. It’s a navigation style which displays menu items on the left and right of your website logo or site title. See example below:

Squarespace 7.1 offers a few different navigation style options, however does not include our beloved split navigation style. The good news? With just a few easy steps, we can implement a split navigation into our website — we’ll show you how!

STEP 1:
CONTENT BUILD OUT

FOLLOW VIDEO:

Tip: we recommend an even number of navigation menu items for the best results.

Select centered header layout with menu items stacked below logo/site title. See below:

STEP 2: COPY/PASTE CSS

GO TO: DESIGN > CUSTOM CSS > PASTE CODE BELOW

// SPLIT NAVIGATION

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

.header-nav-item:nth-of-type(3) {
    margin-right: 340px!important;
}

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

.header-display-desktop .header-title {
    flex: 0 0 40% !important;
    z-index: 999999999;
}

STEP 3: CUSTOMIZE

IMPLEMENT + CUSTOMIZE BY FOLLOWING THE VIDEO BELOW

Important note: on the line where it says ".header-nav-item:nth-of-type(3) ”, change “3” to how many nav items you have on each side of the logo. Example: with 4 nav items total, change that number to “2” (2 menu navigation items on each side of the logo/site title).

Thanks for reading!

Did this tutorial help? Consider buying me a coffee as thanks! 🥰

Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!

* Disclaimer: This post contains affiliate links. If you purchase through our links, we may earn a small commission at no extra cost to you. We only ever recommend tools we genuinely use and love.

More tutorials

Blog