Hoe maak je een Sticky Floating-navigatiemenu in WordPress

Heb je gemerkt dat veel populaire websites nu een sticky navigatiemenu gebruiken. Normaal gesproken worden navigatiemenu’s bovenaan weergegeven en verdwijnen als gebruikers naar beneden scrollen.

 Kleverige navigatiemenu’s zweven als gebruikers naar beneden scrollen en zijn altijd zichtbaar op het scherm. In dit artikel laten we u zien hoe u eenvoudig een vast zwevend navigatiemenu kunt maken in WordPress.

Methode 1: Sticky Floating-navigatiemenu toevoegen met Plugin

Deze methode is eenvoudiger en wordt aanbevolen voor alle gebruikers. Als u de navigatiemenu’s nog niet hebt ingesteld, raadpleegt u onze handleiding voor het toevoegen van een navigatiemenu in WordPress .

Het eerste dat u hoeft te doen, is het installeren en activeren van het Sticky Menu (of iets!) Op de Scroll- plug-in. Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

Na activering moet je de pagina Instellingen »Plakmenu (of om het even!)Bezoeken om de plug-in-instellingen te configureren.

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

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

Ga eenvoudig naar uw website en ga met uw muis naar het navigatiemenu. Hierna moet u rechts klikken en Inspecteren in het menu van uw browser selecteren.

Hiermee wordt je browserscherm gesplitst en kun je de broncode van je navigatiemenu bekijken. U moet een regel code vinden zoals deze:

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

Ga je gang en voer de navigatie-CSS-ID in de plug-in-instellingen op deze manier in #site-navigation.

De volgende optie op de instellingenpagina van de plug-in is om de ruimte tussen de bovenkant van uw scherm en het plakkerige navigatiemenu te definiëren.

 U kunt deze instelling gebruiken als uw menu een element overlapt dat u niet wilt verbergen. Als dit niet het geval is, negeert u deze instelling.

Daarna moet u op het selectievakje naast de optie klikken: ‘Zoeken naar beheerdersbalk’. Hierdoor kan de plug-in wat ruimte toevoegen voor de WordPress-beheerbalk die alleen wordt toegevoegd aan ingelogde gebruikers.

Met de volgende optie op de instellingenpagina kunt u het navigatiemenu ontketenen als een gebruiker uw website bezoekt met een kleiner scherm zoals een mobiel apparaat.

U kunt testen hoe het eruit ziet op mobiele apparaten of tablets. Als je het niet leuk vindt, kun je 780px toevoegen voor deze optie.

Vergeet niet op de knop instellingen opslaan te klikken om uw wijzigingen op te slaan.

U kunt nu uw website bezoeken om uw kleverige zwevende navigatiemenu in actie te zien.

Methode 2: handmatig Sticky Floating-navigatiemenu toevoegen

Voor deze methode moet u aangepaste CSS-code toevoegen aan uw thema. Als u dit nog niet eerder hebt gedaan, raadpleegt u onze handleiding over het eenvoudig toevoegen van aangepaste CSS aan uw WordPress-site .

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

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

Vervangen #site-navigationdoor de CSS-ID van uw navigatiemenu en klik op de knop Opslaan & publiceren.

U kunt nu uw website bezoeken om uw kleverige zwevende navigatiemenu in actie te zien.

Als uw navigatiemenu normaal verschijnt na de sitekop, dan kan deze CSS-code de sitetitel en header overlappen.

Dit kan eenvoudig worden aangepast door een marge toe te voegen aan uw header-gebied met behulp van een CSS zoals deze:

Vervang site-brandingdoor de CSS-klasse van uw header-gebied.

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