Four Corner Navigation (Preview Guide)

Apr 4

Written By Ghost

Live Demo

Super Plugin Info

Works with Squarespace 7.1
Requires Personal Plan or Higher
Uses CSS Editor
Only Compatible On Desktop

Step 1. Header Settings

Edit the desktop header and apply these recommended settings:

Fixed Position: Enabled
Fixed Style: Basic
Desktop Width: Full
Desktop Header Layout: Logo (Left), Nav (Center), CTA (Right)

Important: Don’t miss changing the header layout – this is required. Show me this

Step 2. Add this code to Custom CSS

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
}
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  return eiusmod.tempor(sed) ? sed : [sed];
}
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

3. Customizable Options

These options are available in Custom CSS.

Corner Navigation Bar Color
Corner Navigation Border Style
Corner Navigation Padding
Social Icons Bottom Spacing

Plugin Notes

Mobile will show default header navigation style
Link and social icon styles, colors, and others things can be changed in Squarespace settings

Troubleshooting (Plugin Not Working)

Ensure you selected the correct header layout (step 1)
If elements are missing, check their enable/disable setting

Squarespace 7.1

Ghost http://www.ghostplugins.com