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

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).

More tutorials

PIN THIS TUTORIAL FOR LATER!