Oplossing voor WordPress Navigatie Menu dat onder Admin Bar verschijnt
Waarom overlapt de WordPress Admin Bar het navigatiemenu?
Als je hebt gemerkt dat het navigatiemenu van je website onder de WordPress adminbalk verschijnt, ben je niet de enige. Dit is een veelvoorkomend probleem en we hebben het op veel websites gezien.
Dit probleem kan frustrerend zijn, vooral als het delen van je menu verbergt of het moeilijk maakt voor ingelogde gebruikers om erop te klikken.
We hebben gemerkt dat dit meestal optreedt als gevolg van conflicten met het thema of CSS. Maar het goede nieuws is dat het snel kan worden opgelost.
In dit artikel laten we je zien wat je moet doen als de WordPress-navigatiebalk onder de adminbalk staat, te beginnen met een eenvoudige, niet-technische oplossing die geen codering vereist.
Oplossing 1: Verberg de Admin Bar via gebruikersprofiel instellingen
Als jouw WordPress-navigatiemenu verborgen lijkt te zijn of overlapt met de adminbalk, heb je mogelijk te maken met een veelvoorkomend weergaveprobleem.
We hebben gemerkt dat dit probleem optreedt wanneer de CSS van een thema geen rekening houdt met de hoogte van de adminbalk. De CSS bedekt dan delen van de header van je site, inclusief het navigatiemenu.
Je kunt merken dat sommige menu-items moeilijk te klikken zijn of dat het hele menu gedeeltelijk bedekt is wanneer je je site bekijkt. Dit kan frustrerend zijn, vooral wanneer het de bruikbaarheid van je website beïnvloedt.
Er zijn een paar veelvoorkomende redenen waarom dit kan gebeuren:
– Themaconflicten: Soms houdt de CSS in jouw thema geen rekening met de adminbalk, waardoor het menu verkeerd gepositioneerd wordt.
– Pluginconflicten: Een plugin die het ontwerp aan de voorkant aanpast, kan per ongeluk ervoor zorgen dat het menu overlapt met de adminbalk. Dit kan onder andere gebeuren bij plugins die mega-menu’s of kopbanners toevoegen.
– Aangepaste CSS: Als je aangepaste CSS aan je site hebt toegevoegd, kan dit invloed hebben op de juiste weergave van je menu.
Dit probleem kan de bruikbaarheid van je site beïnvloeden, waardoor het moeilijker wordt voor gebruikers om te navigeren. Gelukkig zijn er verschillende manieren om dit probleem op te lossen, te beginnen met een eenvoudige oplossing die geen codering vereist.
Hier is een overzicht van de oplossingen die we zullen laten zien. Je kunt naar de oplossing gaan die jou het gemakkelijkst lijkt:
– Oplossing 1: De adminbalk verbergen via de gebruikersprofielinstellingen
– Oplossing 2: Het handmatig aanpassen van de CSS van het thema
– Oplossing 3: Controleren op pluginconflicten
– Extra bronnen voor WordPress-beheer.
Oplossing 2: Handmatig aanpassen van de CSS van het thema
Deze oplossing is ideaal voor jou als je snel en gemakkelijk een probleem wilt oplossen zonder dat je met code hoeft te werken. Het is perfect voor beginners of iedereen die zich zorgen maakt om per ongeluk de lay-out van hun site te verpesten.
Bovendien, als je geen toestemming hebt om de CSS of themabestanden van je site aan te passen, biedt deze methode een eenvoudige manier om het probleem te vermijden zonder permanente wijzigingen aan te brengen.
Let op: Deze oplossing geldt op gebruikersniveau, wat betekent dat andere gebruikers op jouw site moeten inloggen op hun accounts en de volgende stappen moeten herhalen.
Eerst moet je inloggen op je WordPress-dashboard. Navigeer vervolgens naar de Gebruikers » Profielpagina in het linkermenu.
Scroll naar beneden naar de Werkbalksectie en vink het vakje naast de optie ‘Werkbalk weergeven tijdens het bekijken van de site’ uit.
Vergeet daarna niet op ‘Profiel bijwerken’ te klikken om je wijzigingen op te slaan.
Waarom dit werkt
Door de adminbalk te verbergen, voorkom je dat deze de navigatiemenu op de voorkant van je site verstoort. Aangezien de adminbalk niet wordt weergegeven, is het overlapping probleem tijdelijk opgelost en is je menu volledig toegankelijk voor zowel jou als je bezoekers.
Oplossing 3: Controleren op conflicten met plugins
Als je comfortabel bent met het werken met HTML en CSS of een meer permanente oplossing wilt voor het probleem met overlappende menu’s, moet je de CSS van je thema aanpassen.
Deze oplossing is ideaal voor gebruikers die de benodigde toestemming hebben om de vormgeving van hun website aan te passen en het probleem bij de bron willen oplossen.
1. Onderzoek het probleem:
Allereerst moet je de Inspecteer tool in je browser gebruiken om te bepalen waar je de aangepaste CSS moet toevoegen. We hebben een gedetailleerde handleiding voor beginners over het gebruik van de Inspecteer tool.
Klik met de rechtermuisknop op je navigatiemenu en selecteer ‘Inspecteer’ (in Chrome) of ‘Element inspecteren’ (in Firefox).
Dit opent de ontwikkelaarstools, waarin de HTML en CSS voor het element worden weergegeven.
In de code moet je de CSS-klassen of ID’s vinden die je thema gebruikt om de kop- of navigatiemenugebieden weer te geven. Bijvoorbeeld, in de bovenstaande schermafbeelding gebruikt onze demowebsite de .site-header klasse voor het betreffende gebied.
Tip: Beweeg je muis over de HTML en je browser zal het gebied in het voorbeeldvenster markeren. Klik met de rechtermuisknop op HTML en kijk dan onder ‘Stijlen’ om de CSS-eigenschappen te vinden.
Voeg aangepaste CSS toe met WPCode
Vervolgens moet je de WPCode plugin installeren en activeren. Het is de beste WordPress plugin voor aangepaste code, waardoor het toevoegen van aangepaste CSS aan je website heel eenvoudig is, ongeacht je thema.
Een andere reden om WPCode te gebruiken, is vanwege de conditionele logica regels. Aangezien dit probleem alleen van invloed is op ingelogde gebruikers, hebben we deze regels nodig om onze code alleen voor ingelogde gebruikers toe te voegen.
Installeer en activeer de WPCode plugin. Zie onze handleiding over het installeren van een WordPress plugin voor meer details.
Opmerking: Er is ook een gratis versie van WPCode beschikbaar die voor deze tutorial zou werken. We raden echter aan om te upgraden naar een betaald abonnement omdat dit toegang geeft tot meer functies.
Eenmaal geactiveerd, ga naar de Code Snippets » + Nieuwe snippet toevoegen pagina in je WordPress dashboard.
Op de volgende pagina toont de plugin een aantal kant-en-klare code snippets. We gaan echter aangepaste CSS-code schrijven.
Beweeg je muis naar het vak ‘Je aangepaste code toevoegen (nieuwe snippet)’ en klik op de knop ‘+ Aangepaste snippet toevoegen’.
Dit brengt je naar de code-editorpagina.
Voer hier een naam in voor je code snippet en selecteer vervolgens ‘CSS Snippet’ uit de vervolgkeuzelijst ‘Code type’.
Voeg daarna de volgende code toe in het vak ‘Code voorbeeld’:
In deze code snippet moet je #your-menu-id en .your-menu-class vervangen door de waarden die je wilt targeten in de HTML.
Hier is hoe we het hebben toegevoegd aan onze testwebsite en aangepast om het betreffende gebied te targeten.
De CSS bevat vier regels.
Allereerst zijn er de regels voor margin-top en padding-top. Aangezien de adminbalk een vaste hoogte heeft van 32 pixels, gebruik je dat om conflicterende CSS te compenseren.
Vervolgens heeft de adminbalk ook een z-indexwaarde van 9999. Deze regel zorgt ervoor dat deze naar voren wordt gebracht in de weergave. Door de z-indexregel met een hogere waarde te gebruiken, verplaats je je kop- of navigatiegebied naar voren.
De positie regel is ingesteld op relatief zodat je de z-indexregel kunt gebruiken.
Nadat je je aangepaste CSS-regels hebt toegevoegd, moet je WPCode vertellen dat deze CSS-code alleen moet worden gebruikt wanneer een ingelogde gebruiker de site bekijkt.
Scroll naar beneden naar het Smart Conditional Logic gedeelte en schakel de schakelaar naast de optie ‘Logica inschakelen’ in.
Stel vervolgens eenvoudig de voorwaardeoptie in op ‘Weergeven’ en klik op ‘+ Nieuwe groep toevoegen’.
Onder de logische regels moet je ‘Ingelogd’ > ‘Is’ > ‘Waar’ selecteren.
Klik tenslotte rechtsboven op ‘Snippet opslaan’ en schakel het van Inactief naar Actief.
Nu moet je je site bezoeken en controleren of het navigatiemenu en het kopgebied nu correct boven de adminbalk worden weergegeven.
Als het de eerste keer niet lukt, probeer dan de waarde van margin-top aan te passen of target andere ID’s of CSS-klassen.
Waarom dit werkt
Het probleem treedt vaak op omdat de CSS van het thema geen rekening houdt met de adminbalk, waardoor het navigatiemenu eronder wordt weergegeven. Door een klein stukje aangepaste CSS toe te voegen, kun je de positionering van het navigatiemenu aanpassen, zodat het correct boven de adminbalk wordt weergegeven.
Bonus Tip : Heb je moeite met CSS-problemen? Je kunt onze WordPress noodondersteuning inhuren. Tegen een kleine vergoeding zullen onze WordPress-ontwikkelaars het probleem voor je oplossen en kun jij weer verder gaan met het laten groeien van je bedrijf.
Aanvullende bronnen voor WordPress-beheerders
Als je de vorige oplossingen hebt geprobeerd en het probleem nog steeds aanwezig is, kan het veroorzaakt worden door een conflict met een plugin.
Plugins kunnen soms CSS of JavaScript toevoegen die interfereren met de lay-out van je thema. Deze interferentie kan problemen veroorzaken, zoals het navigatiemenu dat onder de admin-balk verschijnt.
Het identificeren van de conflicterende plugin kan het probleem oplossen zonder dat je de code van je thema hoeft te wijzigen.
1. Deactiveer alle plugins:
Ga eerst naar je WordPress-dashboard en navigeer naar Plugins » Geïnstalleerde plugins.
Selecteer alle plugins door het vakje naast Plugin bovenaan de lijst aan te vinken.
Kies ‘Deactiveren’ uit het vervolgkeuzemenu voor bulkacties en klik op ‘Toepassen’.
Bezoek nu eenvoudigweg je site om te zien of het probleem is opgelost. Als het navigatiemenu nu correct wordt weergegeven, heeft waarschijnlijk een van de plugins het probleem veroorzaakt.
2. Identificeer de conflicterende plugin
Om erachter te komen welke plugin het probleem veroorzaakte, ga je terug naar de pagina Geïnstalleerde plugins.
Je moet elke plugin één voor één reactiveren en je site controleren na elke activering. Herhaal dit proces totdat het probleem optreedt na het activeren van een specifieke plugin.
Zodra het probleem opnieuw verschijnt, heb je succesvol de plugin geïdentificeerd die het conflict veroorzaakt.
Wat nu te doen
Als je een conflicterende plugin hebt geïdentificeerd, overweeg dan om contact op te nemen met de ontwikkelaar van de plugin voor ondersteuning. Ze kunnen een oplossing of update bieden om het probleem op te lossen. Als alternatief kun je op zoek gaan naar een andere plugin die vergelijkbare functionaliteit biedt zonder conflicten te veroorzaken.
Over de redactie
Hier zijn nog een paar bronnen die je misschien handig vindt:
– Hoe je de WordPress Admin-balk uitschakelt voor alle gebruikers behalve beheerders
– Hoe je het probleem van de ontbrekende Admin-balk in WordPress kunt oplossen (3 manieren)
– Hoe je aangepaste snelkoppelingen kunt toevoegen aan je WordPress Admin-werkbalk
– Beginner’s Gids voor het oplossen van WordPress-fouten (Stap voor stap)
Hopelijk zullen de oplossingen die we hebben gedeeld het probleem oplossen van de Admin-balk die de navigatiemenu of de header op je website verstoort.
Je kunt ook onze handleiding raadplegen voor het oplossen van de meest voorkomende WordPress-fouten of onze tips bekijken voor het aanpassen van de WordPress Admin-omgeving aan jouw eisen.
Als je dit artikel leuk vond, abonneer je dan op ons YouTube-kanaal voor WordPress video-tutorials. Je kunt ons ook vinden op Twitter en Facebook.
– Hoe je in 2024 een podcast kunt starten (en succesvol kunt maken)
– Hoe je Google Analytics kunt installeren in WordPress voor beginners
– Onthuld: Waarom het vandaag de dag zo belangrijk is om een e-maillijst op te bouwen (6 redenen)
– 13 dingen die je MOET DOEN voordat je WordPress-thema’s wijzigt
Hoe je in 2024 een podcast kunt starten (en succesvol kunt maken)
Hoe je Google Analytics kunt installeren in WordPress voor beginners
Onthuld: Waarom het vandaag de dag zo belangrijk is om een e-maillijst op te bouwen (6 redenen)
13 dingen die je MOET DOEN voordat je WordPress-thema’s wijzigt
Openbaarmaking: Onze inhoud wordt ondersteund door lezers. Dit betekent dat als je op een aantal van onze links klikt, we mogelijk een commissie verdienen. Bekijk hoe WPBeginner wordt gefinancierd, waarom het belangrijk is en hoe je ons kunt ondersteunen. Hier is ons redactionele proces.
Lezerinteracties
Wij zijn een team van WordPress experts met meer dan 16 jaar ervaring in WordPress, webhosting, eCommerce, SEO en marketing. Ons team wordt geleid door Syed Balkhi. Sinds 2009 zijn wij actief en inmiddels zijn wij uitgegroeid tot de grootste gratis WordPress bron in de branche. Vaak wordt naar ons verwezen als de Wikipedia voor WordPress.
De Ultieme WordPress Toolkit
Krijg GRATIS toegang tot onze toolkit, een verzameling van producten en bronnen die elke professional zou moeten hebben op het gebied van WordPress.
Belangrijkste zijbalk
Bedankt dat je ervoor hebt gekozen om een reactie achter te laten. Houd er alsjeblieft rekening mee dat alle reacties worden gemodereerd volgens ons reactiebeleid en dat je e-mailadres NIET wordt gepubliceerd. Gebruik alsjeblieft GEEN zoekwoorden in het naamveld. Laten we een persoonlijk en betekenisvol gesprek hebben.
Naam*
E-mail*
Reactie*
Geen reacties abonnerenAlle nieuwe reactiesAntwoorden op mijn reactiesNotificatie van follow-up reacties via e-mail. Je kan je ook abonneren zonder een reactie achter te laten.
Belangrijke Links op een Website
Ontvang verse inhoud van WPBeginner
De ultieme WordPress Toolkit
Krijg GRATIS toegang tot onze toolkit – een verzameling van WordPress gerelateerde producten en bronnen die elke professional zou moeten hebben!
– Hoe je het WordPress Navigatiemenu kunt repareren dat onder de Admin-balk verschijnt
– White Labeling Ecommerce uitgelegd voor beginners
– Maak kennis met OnePageGA: Google Analytics-rapporten gemaakt gemakkelijk
– Hoe je WordPress-beheericonen kunt toevoegen of wijzigen (2 eenvoudige methoden)
– 110+ Nonprofit Marketing-statistieken en inzichten die je zou moeten weten
– 30 “bewezen” manieren om geld te verdienen met bloggen met WordPress
– Hoeveel kost het echt om een WordPress-website te bouwen?
– Gratis opname: WordPress Workshop voor beginners
– Welke is de beste WordPress-popup-plugin? (Vergelijking)
– 5 beste WordPress Ecommerce-plugins vergeleken
– Hoe maak je op de JUISTE MANIER een e-mailnieuwsbrief (stap voor stap)
– Hoe verplaats je je blog van WordPress.com naar WordPress.org op de juiste manier
– Hoe verplaats je WordPress op de juiste manier naar een nieuw domein zonder SEO te verliezen
– Hoe schakel je over van Blogger naar WordPress zonder je rankings te verliezen
– Hoe schakel je op de juiste manier over van Wix naar WordPress (stap voor stap)
– Hoe verplaats je op de juiste manier van Squarespace naar WordPress
– Hoe verplaats je WordPress naar een nieuwe host of server zonder downtime
– Beste WooCommerce-hosting (vergelijking)
– De waarheid over gedeelde WordPress-webhosting
– Wanneer heb je echt beheerde WordPress-hosting nodig?
– HostGator Review – Een eerlijke kijk op snelheid en uptime
– SiteGround-beoordelingen van 4,975 gebruikers en onze experts
– Bluehost Review van echte gebruikers + prestatiegegevens
– Waarom je meteen moet beginnen met het opbouwen van een e-maillijst
– Waarom is WordPress gratis? Wat zijn de kosten? Wat is de vangst?
– Wat is het verschil tussen een domeinnaam en webhosting (uitgelegd)
– WordPress.com versus WordPress.org – Wat is beter? (Vergelijkingsgrafiek)
– Hoe verplaats je WordPress op de juiste manier van HTTP naar HTTPS (Beginnersgids)
– Hoe codeer je een website (complete beginnersgids)
Gratis tools
– Over ons
– Onze redactionele normen
– Ontmoet ons beoordelingsteam
– Pers en merkmiddelen
– Neem contact met ons op
– Privacybeleid
– Gebruiksvoorwaarden
– FTC-openbaarmaking
– Gratis bloginstallatie
– Groeifonds
Belangrijke bronnen voor het optimaliseren van je WordPress-website
– Bedrijfsnaam Generator
– WordPress Thema Detector
– SEO Zoekwoord Generator
– Hoofdlijn Analyzer
– Website SEO Analyzer
– E-mail Handtekening Generator
– Meer dan 27 Gratis Bedrijfsinstrumenten
Onze Merken
Welkom bij onze website! Hier vind je allerlei handige informatie en hulpmiddelen voor WordPress.
Ben je op zoek naar cursussen over WordPress? We hebben een uitgebreid aanbod aan WordPress-cursussen die je kunnen helpen je vaardigheden te verbeteren en alles uit je WordPress-website te halen.
Als je nog niet bekend bent met bepaalde termen of begrippen binnen WordPress, dan hebben we ook een handige WordPress-glossary waar je snel de betekenis kunt vinden. Zo hoef je nooit meer te twijfelen over wat een bepaald woord betekent.
Op zoek naar productrecensies van WordPress? Bij ons vind je een overzicht van verschillende WordPress-producten die we hebben getest en beoordeeld. Zo kun je een weloverwogen keuze maken bij de aanschaf van nieuwe WordPress-tools.
En natuurlijk hebben we ook regelmatig WordPress-deals die je niet wilt missen. Van kortingen op premium plugins tot speciale aanbiedingen voor thema’s, we houden je op de hoogte van de beste deals.
Maar dat is nog niet alles. We hebben ook veel informatie en tips over WordPress SEO om ervoor te zorgen dat jouw website goed vindbaar is in zoekmachines.
En last but not least, we begrijpen dat beveiliging van je WordPress-website belangrijk is. Daarom hebben we een hele sectie gewijd aan WordPress-beveiliging, met handige tips en tools om je website te beschermen tegen hackers en malware.
Kortom, op onze website vind je alles wat je nodig hebt voor WordPress. Of je nu op zoek bent naar cursussen, productrecensies, deals, SEO of beveiliging, wij hebben de juiste informatie en hulpmiddelen voor jou. Veel plezier en succes met je WordPress-avontuur!