Hoe maak je een sticky floating (zwevend) navigatiemenu in WordPress

5 min


125

Onlangs vroeg een van onze gebruikers ons hoe ze een plakkerig navigatiemenu voor hun site konden maken.

Sticky navigatiemenu’s blijven op het scherm terwijl gebruikers naar beneden scrollen. Hierdoor is het bovenste menu altijd zichtbaar, wat goed is voor de gebruikerservaring omdat het links bevat naar de belangrijkste onderdelen van uw website.

In dit artikel laten we u zien hoe u eenvoudig een plakkerig zwevend navigatiemenu in WordPress kunt maken.

Een plakkerig zwevend navigatiemenu maken in WordPress

Wat is een Sticky Floating Navigation Menu?

Een plakkerig of zwevend navigatiemenu is een menu dat boven aan het scherm ‘blijft plakken’ terwijl een gebruiker naar beneden scrolt. Hierdoor is uw menu te allen tijde zichtbaar voor gebruikers.

Hier is een plakkerig menu in actie. We gaan u laten zien hoe u een menu precies zo kunt maken voor uw eigen site:

Een plakkerig navigatiemenu in actie op onze demo-website

Waarom en wanneer plakkerige menu’s nuttig kunnen zijn?

Gewoonlijk bevat het bovenste navigatiemenu links naar de belangrijkste onderdelen van een website. Een zwevend menu maakt die koppelingen altijd zichtbaar, waardoor gebruikers niet terug naar boven hoeven te scrollen. Het is ook bewezen dat het de conversies verhoogt.

Als u een online winkel heeft , bevat uw bovenste navigatiemenu waarschijnlijk links naar de winkelwagen, productcategorieën en productzoekopdrachten. Door dit menu plakkerig te maken, kunt u het verlaten van de winkelwagen verminderen en de verkoop verhogen.

Enkele van de beste WordPress-thema’s hebben ingebouwde ondersteuning voor een plakkerig navigatiemenu. Bekijk uw thema-instellingen onder Thema’s »Aanpassen om deze functie in te schakelen.

Als uw thema deze optie niet heeft, blijf dan lezen, en we laten u zien hoe u eenvoudig een plakkerig zwevend navigatiemenu kunt maken in elk WordPress-thema of WooCommerce- winkel.

Methode 1: Voeg uw Sticky Floating Navigation-menu toe met behulp van een plug-in

Dit is de gemakkelijkste methode. We raden het aan voor alle WordPress-gebruikers, vooral voor beginners.

Als je je navigatiemenu nog niet hebt ingesteld, ga je gang en doe dat met behulp van onze instructies voor het toevoegen van een navigatiemenu in WordPress .

Daarna moet u het Sticky Menu (of iets anders!) Op de Scroll- plug- in installeren en activeren . Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

Na activering moet u de pagina Instellingen »Sticky Menu (of iets anders!) Bezoeken om de instellingen van de plug-in te configureren.

De instellingenpagina van de Sticky Menu-plug-in

Eerst moet u de CSS- ID van het navigatiemenu invoeren dat u plakkerig wilt maken.

U moet de inspectietool van uw browser gebruiken om de CSS-ID te vinden die door uw navigatiemenu wordt gebruikt.

Bezoek gewoon uw website en ga met uw muis naar het navigatiemenu. Daarna moet u met de rechtermuisknop klikken en Inspecteren selecteren in het menu van uw browser.

Inspectie van het navigatiemenu-element op uw website

Hierdoor wordt uw browserscherm gesplitst en kunt u de broncode voor uw navigatiemenu zien.

U moet een regel code vinden die betrekking heeft op uw navigatie of de koptekst van uw site. Het ziet er ongeveer zo uit:

1<nav id="site-navigation" class="main-navigation" role="navigation">

Als u het moeilijk vindt om het te vinden, plaatst u uw muiscursor over de verschillende regels code in het inspectievenster. Het navigatiemenu wordt volledig gemarkeerd wanneer u de juiste regel code heeft:

De ID van het navigatiemenu vinden met de inspectietool

In dit geval is de CSS-ID van ons navigatiemenu site-navigation.

Het enige dat u hoeft te doen, is de CSS-ID van uw menu in de plug-in-instellingen invoeren met een hash aan het begin. In dit geval is dat #site-navigation.

Het ID invoeren van het element dat u plakkerig wilt maken (in dit geval het navigatiemenu)

Vergeet niet onder aan de pagina op de knop ‘Wijzigingen opslaan’ te klikken.

Ga nu je gang en bekijk je plakmenu live op je WordPress-website . Het zou als volgt op de pagina moeten blijven terwijl u naar beneden scrolt:

Bekijk het plakmenu op uw website

De volgende optie op de instellingenpagina van de plug-in is om de ruimte tussen de bovenkant van je scherm en het plakkerige navigatiemenu te definiëren. U hoeft deze instelling alleen te gebruiken als uw menu een element overlapt dat u niet wilt verbergen. Als dit niet het geval is, negeert u deze instelling.

We raden aan om het vakje aangevinkt te laten naast de optie: ‘Check for Admin Bar’. Hierdoor kan de plug-in wat ruimte toevoegen voor de WordPress-beheerbalk , die alleen zichtbaar is voor ingelogde gebruikers.

Hier kunt u zien dat de admin-balk op onze testsite correct wordt weergegeven boven het sticky-menu:

De WordPress-beheerbalk verschijnt boven het plakmenu

Met de volgende optie kunt u het navigatiemenu losmaken als een gebruiker uw website bezoekt met een kleiner scherm, zoals een mobiel apparaat:

De sticky menu-plug-in biedt ook nog meer opties

U kunt testen hoe uw site eruitziet op mobiele apparaten of tablets. Als het je niet bevalt, voeg dan gewoon 780px toe voor deze optie.

Vergeet niet op de knop Wijzigingen opslaan te klikken nadat u wijzigingen in uw opties hebt aangebracht.

Methode 2: handmatig een plakkend zwevend navigatiemenu toevoegen

Voor deze methode moet je aangepaste CSS-code aan je thema toevoegen. We raden het niet aan voor beginners.

Eerst moet u Uiterlijk »Aanpassen bezoeken om de WordPress-thema-aanpasser te starten.

Aangepaste CSS toevoegen in WordPress-thema

Klik vervolgens op ‘Extra CSS’ in het linkerdeelvenster en voeg deze CSS-code toe.

12345678910111213#site-navigation {background:#00000;height:60px;z-index:170;margin:0 auto;border-bottom:1px solid #dadada;width:100%;position:fixed;top:0;left:0;right:0;text-align: center;}

Opmerking: hierdoor ontstaat een navigatiemenu met een zwarte achtergrond. Als u een andere kleur wilt, wijzigt u het nummer naast background. Als u bijvoorbeeld gebruikt, background: #ffffffkrijgt u een witte menu-achtergrond.

Vervang gewoon door #site-navigationde CSS-ID van uw navigatiemenu en klik vervolgens op de knop Publiceren bovenaan het scherm.

Ga je gang en bezoek je website om je plakkerige zwevende navigatiemenu in actie te zien:

Een plakkerig / zwevend navigatiemenu gemaakt met CSS

Wat als uw navigatiemenu normaal onder de sitekop verschijnt in plaats van erboven? Als dit het geval is, kan deze CSS-code de titel en koptekst van de site overlappen of er te dicht bij lijken voordat de gebruiker scrolt:

Het plakkerige navigatiemenu overlapt de sitetitel enigszins

Dit kan eenvoudig worden aangepast door een marge toe te voegen aan uw koptekstgebied met wat extra CSS-code:

123.site-branding {margin-top:60px !important;}

Vervang site-brandingdoor de CSS-klasse van uw koptekstgebied. Nu zal het plakkerige navigatiemenu uw koptekst niet langer overlappen voordat de gebruiker naar beneden scrolt:

Er is nu ruimte voor de titel onder het plakkerige navigatiemenu

We hopen dat dit artikel je heeft geholpen om een ​​plakkerig zwevend navigatiemenu toe te voegen aan je WordPress-site.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format