Colorful Fixed Anchor Navigation

What You'll Create

A fixed side navigation featuring small colored tabs that slide out to reveal section labels when hovered. Each anchor has its own distinct color, creating a playful, branded navigation experience that stays visible as visitors scroll.

The Problem It Solves

Long scrolling pages need navigation aids, but standard anchor menus can look generic. This technique adds personality with color-coded tabs that peek out from the edge of the screen, inviting exploration while maintaining a clean design when not in use.

Perfect For

Creative portfolios, Brand identity sites, Product showcases, Interactive landing pages, Agency websites

What Makes This Different

The navigation tabs start hidden off-screen with just a colored edge visible. On hover, each tab smoothly slides into view, revealing the section label with a rounded edge. Each list item can have its own background color, creating a rainbow effect that adds visual interest. The hover interaction makes the navigation feel responsive and playful without cluttering the design.

Details

• Section Type: Fluid Engine

• Code Type: CSS

• Prerequisites: Text block with unordered list in the last page section, anchor links set up for each section

• Toolkit Title: Color Anchors

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