wat is een chatbot?

Hoe WordPress Navigatie-menu’s te stijlen

7 min


98

Wilt u uw WordPress navigatiemenu’s stylen om hun kleuren of uiterlijk te veranderen? Terwijl uw WordPress-thema de weergave van uw navigatiemenu’s behandelt, kunt u het eenvoudig aanpassen met behulp van CSS om aan uw vereisten te voldoen.

 In dit artikel laten we u zien hoe u de WordPress-navigatiemenu’s op uw site vormgeeft.

voor 700+ andere wordpress artikelen check: https://delaatbusiness.com/category/wordpress/

Styling navigatiemenu's in WordPress

We zullen twee verschillende methoden laten zien. De eerste methode is voor beginners omdat het een plug-in gebruikt en geen kennis van de code vereist. De tweede methode is voor middelgrote DIY-gebruikers die liever CSS-code gebruiken in plaats van een plug-in.

Methode 1: WordPress navigatie-menu’s stylen met behulp van een plug-in

Uw WordPress-thema maakt gebruik van CSS om navigatiemenu’s te stijlen . Veel beginners zijn niet op hun gemak bij het bewerken van themabestanden of het zelfstandig schrijven van CSS-code.

Dat is wanneer een WordPress styling-plug-in van pas komt. Het bespaart u van het bewerken van themabestanden of het schrijven van elke code.

Eerst moet je de CSS Hero- plug-in installeren en activeren . Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

CSS Hero is een premium WordPress plug-in waarmee je je eigen WordPress-thema kunt ontwerpen zonder een enkele regel code te schrijven (geen HTML of CSS vereist). Bekijk onze CSS Hero-recensie voor meer informatie.

WPBeginner-gebruikers kunnen deze CSS Hero-coupon gebruiken om 34% korting op hun aankoop te krijgen.

Na activering wordt u omgeleid om uw CSS Hero-licentiesleutel te verkrijgen. Volg eenvoudig de instructies op het scherm en u wordt in enkele muisklikken teruggeleid naar uw site.

Vervolgens moet u op de knop CSS-held in uw WordPress-werkbalk klikken.

Start CSS Hero

CSS Hero biedt een WYSIWYG-editor (wat je ziet is wat je krijgt). Als u op de knop klikt, gaat u naar uw website met een zwevende CSS Hero-werkbalk zichtbaar op het scherm.

CSS Hero Toolbar

U moet op het blauwe pictogram bovenaan klikken om te beginnen met bewerken.

Nadat je op het blauwe pictogram hebt geklikt, beweeg je je muis naar je navigatiemenu en CSS Hero markeert het door de randen eromheen te tonen. Wanneer u op het gemarkeerde navigatiemenu klikt, ziet u de items die u kunt bewerken.

Klik en klik om het menu aan te passen

In de bovenstaande schermafbeelding toont het ons de container van het bovenste navigatiemenu. Laten we aannemen dat we de achtergrondkleur van ons navigatiemenu willen wijzigen. In dat geval selecteren we topnavigatie die van invloed is op ons hele menu.

CSS Hero toont je nu verschillende eigenschappen die je kunt bewerken zoals tekst, achtergrond, rand, marges, opvulling, etc.

CSS-eigenschappen

U kunt klikken op elke eigenschap die u wilt wijzigen. CSS Hero toont u een eenvoudige interface waar u uw wijzigingen kunt aanbrengen.

Het uiterlijk van een element wijzigen

In de bovenstaande schermafbeelding hebben we de achtergrond geselecteerd en deze heeft ons een leuke interface gegeven om achtergrondkleur, verloop, afbeelding en meer te selecteren.

Terwijl u wijzigingen aanbrengt, kunt u ze live bekijken in het themavoorbeeld.

Live preview van uw CSS-wijzigingen

Als u tevreden bent met de wijzigingen, klikt u op de knop Opslaan in de CSS Hero-werkbalk om uw wijzigingen op te slaan.

Het beste ding over het gebruik van deze methode is dat u gemakkelijk alle wijzigingen ongedaan kunt maken die u maakt. CSS Hero bewaart een volledige geschiedenis van al uw wijzigingen en u kunt heen en weer gaan tussen die wijzigingen.

Methode 2: Manueel opgemaakte WordPress navigatiemenu’s

Voor deze methode moet u handmatig aangepaste CSS toevoegen en is bedoeld voor tussenliggende gebruikers.

WordPress-navigatiemenu’s worden weergegeven in een ongeordende lijst (lijst met opsommingstekens).

Als u de standaard WordPress-menutag gebruikt, geeft deze meestal een lijst weer waaraan geen CSS-klassen zijn gekoppeld.

1
<?php wp_nav_menu(); ?>

Uw ongeordende lijst heeft de klassenaam ‘menu’ waarbij elk lijstitem een ​​eigen CSS-klasse heeft.

Dit kan werken als u slechts één menulocatie heeft. De meeste thema’s hebben echter meerdere locaties waar u navigatiemenu’s kunt weergeven.

Als u alleen de standaard CSS-klasse gebruikt, kan dit conflicten veroorzaken met menu’s op andere locaties.

Daarom moet u ook de CSS-klasse en menulocatie definiëren. De kans is groot dat je WordPress-thema dat al doet door de navigatiemenu’s toe te voegen met een code als deze:

1
2
3
4
5
6
<?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
         ) );
?>

Deze code vertelt WordPress dat dit is waar het thema het primaire menu weergeeft. Het voegt ook een primair menu van de CSS-klasse toe aan het navigatiemenu.

Nu kunt u uw navigatiemenu opmaken met deze CSS-structuur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
 // each navigation item
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {}

U moet #header vervangen door de container-CSS-klasse die wordt gebruikt door uw navigatiemenu.

Met deze structuur kunt u het uiterlijk van uw navigatiemenu volledig veranderen.

Er zijn echter andere door WordPress gegenereerde CSS-klassen dieautomatisch aan elk menu en menu-item worden toegevoegd. Met deze klassen kunt u uw navigatiemenu nog verder aanpassen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
// Class for a Category
.menu-item-type-taxonomy{}
 
// Class for Post types
.menu-item-type-post_type{}
// Class for any custom links
.menu-item-type-custom{}
// Class for the home Link
.menu-item-home{}

WordPress biedt u ook de mogelijkheid om uw eigen aangepaste CSS-klassen toe te voegen aan individuele menu-items.

U kunt deze functie gebruiken om menu-items op te maken, zoals het toevoegen van afbeeldingspictogrammen aan uw menu’s of door alleen maar kleuren te wijzigen om een ​​menu-item te markeren.

Ga naar de pagina Uiterlijk »Menu ‘s in uw WordPress-beheerder en klik op de knop Schermopties .

Schakel CSS-klassenoptie in voor afzonderlijke menu-items

Nadat u dit vakje hebt aangevinkt, ziet u dat een extra veld wordt toegevoegd wanneer u elk afzonderlijk menu-item gaat bewerken.

Een aangepaste CSS-klasse toevoegen aan een menu-item in WordPress

Nu kunt u deze CSS-klasse in uw stylesheet gebruiken om uw aangepaste CSS toe te voegen. Het heeft alleen invloed op het menu-item met de CSS-klasse die u hebt toegevoegd.

Voorbeelden van Styling Navigation Menu’s in WordPress

Verschillende WordPress-thema’s kunnen verschillende stylingopties, CSS-klassen en zelfs JavaScript gebruiken om navigatiemenu’s te maken. Dit geeft u veel opties om die stijlen te wijzigen en uw navigatiemenu’s aan te passen aan uw eigen vereisten.

Het inspecteergereedschap in uw webbrowser is uw beste vriend als het gaat om het uitzoeken welke CSS-klassen moeten worden gewijzigd. Als je het nog niet eerder hebt gebruikt, bekijk dan onze handleiding over het gebruik van de inspectietool om WordPress-thema’s aan te passen .

Kortom, u hoeft alleen maar de cursor naar het element te wijzen dat u wilt wijzigen, klik met de rechtermuisknop en selecteer vervolgens het gereedschap Inspecteren in het browsermenu.

Met behulp van inspecteer tool om te zoeken naar te wijzigen CSS-klassen

Dat gezegd hebbende, laten we eens kijken naar enkele voorbeelden uit de praktijk van het stylen van navigatiemenu’s in WordPress.

1. Hoe de kleur van het lettertype in WordPress Navigation Menu’s te veranderen

Hier is de aangepaste CSS die u aan uw thema kunt toevoegen om de lettertypekleur van navigatiemenu’s te wijzigen.

1
2
3
#top-menu  li.menu-item a {
color:#ff0000;
}

In dit voorbeeld is het # top-menu de ID die is toegewezen aan de ongeordende lijst die ons navigatiemenu weergeeft. U moet de inspectietool gebruiken om uit te vinden welk ID door uw thema wordt gebruikt.

Veranderen van de lettertypekleur van WordPress navigatiemenu's

2. Hoe de achtergrondkleur van de navigatie menubalk veranderen

Eerst moet u de CSS-ID of -klasse van uw thema voor de container rond het navigatiemenu te weten komen.

CSS-klasse zoeken voor navigatiemenu-container

Hierna kunt u de volgende aangepaste CSS gebruiken om de achtergrondkleur van de menubalk voor navigatie te wijzigen.

1
2
3
.navigation-top {
background-color:#000;
}

Hier is hoe het eruit zag op onze demo-website.

Achtergrondkleur van navigatiemenubalk wijzigen

3. Hoe de achtergrondkleur van een enkel menu-item te veranderen

U hebt misschien gemerkt dat veel websites een andere achtergrondkleur gebruiken voor de belangrijkste links in hun navigatiemenu. Deze link kan een knop voor inloggen, aanmelden, contact of kopen zijn. Door het een andere kleur te geven, maakt het de link meer opvallend.

Om dit te bereiken, zullen we een aangepaste CSS-klasse toevoegen aan het menu-item dat we willen markeren met een andere achtergrondkleur.

Ga naar Uiterlijk »Menu’s en klik op de knop Schermopties in de rechterbovenhoek van het scherm. Hierdoor wordt een vervolgkeuzemenu weergegeven waarin u het vakje naast de optie ‘CSS-klassen’ moet aanvinken.

Schakel CSS-klassenoptie in voor afzonderlijke menu-items

Hierna moet u naar beneden scrollen naar het menu-item dat u wilt wijzigen en klikken om het uit te vouwen. U zult een nieuwe optie opmerken om uw aangepaste CSS-klasse toe te voegen.

Aangepaste css-klasse toevoegen aan een menu-item

Nu kunt u deze CSS-klasse gebruiken om dat specifieke menu-item anders in te richten.

1
2
3
4
.contact-us {
background-color: #ff0099;
border-radius:5px;
}

Dit is hoe het eruit zag op onze testsite.

Achtergrondkleur van een enkel menu-item wijzigen in WordPress-navigatiemenu's

4. Zwevende effecten toevoegen aan WordPress Navigatiemenu’s

Wilt u dat uw menu-items kleuren veranderen bij het omzetten van de muis? Deze specifieke CSS-truc zorgt ervoor dat uw navigatiemenu’s er interactiever uitzien.

Voeg eenvoudig de volgende aangepaste CSS toe aan uw thema.

1
2
3
4
5
#top-menu  li.menu-item a:hover {
background-color:#fff;
color:#666;
border-radius:5px;
}

In dit voorbeeld is # top-menu de CSS-ID die door uw thema wordt gebruikt voor de ongeordende navigatiemenu’s.

Dit is hoe dit op onze testsite leek.

Muiseffect in WordPress navigatiemenu's

5. Maak Sticky Floating Navigation Menu’s in WordPress

Normaal verschijnen navigatiemenu’s bovenaan en verdwijnen als een gebruiker naar beneden scrolt. Kleverige zwevende navigatiemenu’s blijven boven wanneer een gebruiker naar beneden scrolt.

U kunt de volgende CSS-code aan uw thema toevoegen om uw navigatiemenu’s plakkerig te maken.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#top-menu {
    background:#2194af;
    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: right;
    padding-right:30px
}

Vervang eenvoudig # top-menu door de CSS-ID van uw navigatiemenu.

Hier is hoe het eruit zag in onze demo:

Kleverig navigatiemenu

Raadpleeg onze handleiding voor meer gedetailleerde instructies en alternatieve methode voor het maken van een plakkerig zwevend navigatiemenu in WordPress .

6. Maak transparante navigatie-menu’s in WordPress

Veel websites gebruiken grote of volledig schermachtergrondafbeeldingen met hun call to actieknoppen. Als u transparante menu’s gebruikt, past uw navigatie zich aan de afbeelding aan. Hierdoor zullen gebruikers meer geneigd zijn zich te concentreren op uw oproep tot actie.

Voeg eenvoudig de volgende voorbeeld-CSS toe aan uw thema om uw navigatiemenu’s transparant te maken.

1
2
3
#site-navigation {
background-color:transparent;
}

Zo zag het er uit op onze demosite.

Transparante navigatiemenu's in WordPress

Afhankelijk van uw thema, moet u mogelijk de positie van de headerafbeelding aanpassen zodat deze het gebied achter uw transparante menu’s bedekt.

We hopen dat dit artikel je heeft geholpen bij het leren stijlen van WordPress-navigatiemenu’s. 


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