Split navigatie in Squarespace 7.1 in 3 eenvoudige stappen
Toen Squarespace in 2020 versie 7.1 uitbracht, was ik dolenthousiast, maar ook teleurgesteld. Een geliefde functie uit versie 7.0, de split navigatiestructuur, ontbrak. Deze strakke, symmetrische indeling, waarbij menu items aan beide zijden van het logo staan, geeft websites een professionele en stijlvolle uitstraling. Hoewel Squarespace 7.1 geen standaard symmetrische navigatie biedt, kun je met eenvoudige CSS deze elegante look moeiteloos ontwerpen. In deze blog leer je hoe je een navigatie met een logo in het midden implementeert, ontdek je de voordelen en aandachtspunten, en beantwoord ik veelgestelde vragen.
Wat is een split navigatie?
Een gesplitste navigatie ofwel een symmetrische navigatie is een ontwerpstijl waarbij menu items symmetrisch aan weerszijden van een centraal logo worden geplaatst, wat een gebalanceerde, visueel aantrekkelijke header laat zien. Het is een populaire keuze voor elegante, high-end websites, zoals te zien op de Lex de Gooijer Interieur website. Daarnaast kan split navigatiestructuur verwijzen naar een split screen webdesign, waarbij de inhoud van een pagina in twee verticale kolommen is verdeeld. Dit kan worden gebruikt om verschillende soorten informatie naast elkaar te presenteren, zoals afbeeldingen.
Waarom kiezen voor harmonieuse navigatie?
Met split navigatie geef je jouw website een unieke flair. Hier zijn enkele redenen waarom het zo geliefd is:
Symmetrie en balans: Realiseert een harmonieuze, visueel aantrekkelijke layout die professioneel oogt.
Merk in de spotlight: Een centraal logo trekt de aandacht, terwijl menu items aan beide kanten balans toevoegen.
Gebruikersvriendelijkheid: Een logische, symmetrische indeling maakt navigeren intuïtief en gebruiksvriendelijk.
Moderne esthetiek: Perfect voor een strakke, minimalistische look die een luxe gevoel geeft.
Visueel contrast: Bij deze navigatie ontwerp trekt de twee secties de aandacht van bezoekers.
Flexibiliteit: Ideaal voor minimalistische menu’s met weinig items, zoals 2 tot 3 links en rechts van het logo.
Maar er zijn ook aandachtspunten…
Beperkte schaalbaarheid: Niet geschikt voor uitgebreide menu’s vanwege beperkte ruimte.
Uitdaging op mobiel: De symmetrische look gaat verloren in een compact hamburgermenu op mobiele apparaten.
Ontwerpvalkuilen: Een ongelijke verdeling van menu items kan de header rommelig maken.
Maak een split navigatie in 3 eenvoudige stappen
Met een paar stappen en CSS-code tover je een harmonieuze navigatie tevoorschijn zonder plug-ins of programmeerkennis.
Stap 1: Bereid je inhoud voor
Kies een header indeling waarbij het menu onder het logo verschijnt. Ga naar Pages > Home > Edit > Edit Site Header > Edit Design en selecteer de laatste layout: gecentreerd logo met menu onder.
Stap 2: Voeg de CSS code toe
Ga naar Pages > Custom Code (onderaan) > Custom CSS en plak de volgende code:
//SPLIT NAVIGATION// .header-nav { position: absolute; top: 0; bottom: 0; margin-top: 0; margin-left: 0;}.header-nav-item:nth-of-type(3) { margin-right: 340px;}.header-title-logo a { position: relative; z-index: 1000;}.header-display-desktop .header-title { flex: 0 0 40%; z-index: 1000; /* Verlaagde z-index voor betere onderhoudbaarheid */}Belangrijk: Pas de regel .header-nav-item:nth-of-type(3) aan op basis van je menu items. Heb je bijvoorbeeld 2 items (1 aan elke kant), vervang 3 door 1.
Stap 3: Finetunen en Testen
Controleer je website in desktopweergave. Het logo moet gecentreerd zijn met gelijke menu items aan beide kanten.
Pas de marges in de CSS aan als de uitlijning niet perfect is. Bijvoorbeeld: Verhoog margin-right: 340px voor meer witruimte rond het logo of verander top: 0 naar top: 20px om menu items horizontaal uit te lijnen met het logo.
Alles op een rij
Met gesplitste navigatie in Squarespace maak je een professionele eerste indruk, behoud je volledige controle over je design zonder extra plug-ins en realiseer je een unieke header die perfect aansluit bij jouw merk. Door de inhoud logisch te verdelen en te zorgen voor visueel contrast, verbeter je de gebruikerservaring en geef je je website een harmonieuze, stijlvolle uitstraling. Kies voor split navigatie om een gebruiksvriendelijke website te bouwen die jouw merk versterkt, zonder in te leveren op esthetiek.
Van ‘saai’ naar ‘wow, dit wil ik ook’
Al jaren transformeer ik Squarespace websites naar met een wow-factor. Met meer dan 250 ondernemers heb ik al bewezen dat een goede website wel werkt. Wat maakt mijn aanpak anders? Ik maak jou een professionele website die:
Direct vertrouwen wekt: hier ben ik aan het juiste adres
Bezoekers moeiteloos begeleidt naar actie
Mooi en overzichtelijk webdesign
Volgens de nieuwste SEO/Google richtlijnen
Jou meer tijd oplevert dan je ooit had verwacht
Wil je dieper duiken in Squarespace en SEO? Check dan deze blogposts 👇🏼
