Centered Logo with Split Navigation

Code Toolkit
Written By Squarestylist Support

What You'll Create

Navigation items split between left and right sides of the header with logo centered, using jQuery to reposition elements.

The Problem It Solves

Squarespace 7.1 doesn't natively support split navigation with centered logo. This technique programmatically moves navigation items.

Perfect For

Balanced headers, Centered branding, Professional sites, Agency portfolios, E-commerce stores.

What Makes This Different

jQuery DOM manipulation moves navigation items to different header positions, with CSS flexbox for balanced alignment.

Details

  • Section Type: Fluid & Classic

  • Code Type: CSS + JavaScript

  • Prerequisites: jQuery library and header code injection access

  • Toolkit Title: Centered Nav in 7.1

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Squarestylist Support
Previous

CSS Text Marquee Animation
Next

Lined Header with Full-Width Navigation