Lined Header with Full-Width Navigation
What You'll Create
A header with navigation items separated by vertical lines and spread across the full width, creating a distinctive bordered layout.
The Problem It Solves
Default navigation layouts are common. This technique creates a unique header style with line separators and full-width distribution.
Perfect For
Editorial sites, Magazine layouts, Creative portfolios, Minimalist brands, Professional services.
What Makes This Different
Flexbox with border styling creates evenly distributed navigation items with vertical line separators in a centered header layout.
Details
Section Type: Fluid & Classic
Code Type: CSS
Prerequisites: Header set to Center layout
Toolkit Title: Lined Header 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