Hoe maak je een Sticky Floating-navigatiemenu in WordPress - DeLaatbusiness
leads chatbot

Hoe maak je een Sticky Floating-navigatiemenu in WordPress

3 min


115
6 gratis internet marketing ebooks, klik hier voor download

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.

Hoe Sticky Floating Navigation Menu in WordPress te maken

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.

Sticky Menu plugin-instelling

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.

Inspecteer het gereedschap

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

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

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.

Kleverig menu

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.

Aangepaste CSS toevoegen in WordPress-thema

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#site-navigation {
    background:#fff;
    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;
}

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:

1
2
3
.site-branding {
margin-top:60px;
}

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. 


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
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