Title: Eerste menu-item moet een andere stijl krijgen
Last modified: 4 augustus 2016

---

# Eerste menu-item moet een andere stijl krijgen

 *  Opgelost [Nientje07](https://nl.wordpress.org/support/users/nientje07/)
 * (@nientje07)
 * [15 jaren, 8 maanden geleden](https://nl.wordpress.org/support/topic/eerste-menu-item-moet-een-andere-stijl-krijgen/)
 * Hallo,
 * Ik zou graag het eerste item in mijn bovenste navigatie een andere opmaak geven
   dan de andere items. dit moet gebeuren wanneer ik er met de muisaanwijzer opsta
   en wanneer dat item geselecteerd is.
 * de code die momenteel gebruikt wordt is:
 *     ```
       <div id="nav">
       	<div class="menu">
       		<div class="in">
       		<ul>
       		<?php wp_list_pages('exclude=53,56,59,62,65,68,71,75,78,81&title_li='); ?>
       		</ul>
       		</div>
       		</div>
       	</div>
       ```
   
 * Bijhorende css:
 *     ```
       #nav {
       	float:right;
       	width:775px;
       	height:38px;
       	line-height:38px;
       	background: #ececec url(images/topbar.jpg) no-repeat left;
   
       	}
       	#nav ul {
       	margin:0px;
       	padding:0px;
       	}
   
       	#nav ul li {
       	background: url("images/splitter.jpg") no-repeat scroll right top transparent;
       	float: left;
       	list-style: none outside none;
       	text-align: center;
       	}
   
       	#nav ul li a {
       	color: #000000;
       	display: block;
       	padding: 0 22px;
       	text-decoration: none;
   
       	}
       	#nav ul li a:hover {
       	background: url('images/menu_hover2.gif') no-repeat left;
       	color:#fff;
       	}
   
       	.menu li.current_page_item a{
       	background: url('images/menu_hover2.gif') no-repeat left;
       	color:#FFF!important;
       	}
       ```
   
 * Dus wanneer een item geselecteerd is of wanneer er op gestaan wordt met de muisaanwijzer
   wordt afbeelding menu_hover2 gebruikt.
 * Voor het eerste item moet dit echter menu_hover worden.
 * ikzelf dacht aan het volgende:
    ik maak van `<?php wp_list_pages('exclude=53,56,59,62,65,68,71,75,78,81&
   title_li='); ?>`
 *     ```
       <?php wp_list_pages('include=28&title_li='); ?>
       				<?php wp_list_pages('exclude=28,53,56,59,62,65,68,71,75,78,81&title_li='); ?>
       ```
   
 * (omdat het eerste item van het menu pagina 28 is.)
    Ik wou dan die eerste php
   een andere css stijl geven, maar dit lukt dus niet.
 * Kan iemand mij zeggen hoe ik dit dan wel moet doen?
 * Alvast bedankt,
    Nina

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)

 *  [Jaja..](https://nl.wordpress.org/support/users/jaja-1/)
 * (@jaja-1)
 * [15 jaren, 8 maanden geleden](https://nl.wordpress.org/support/topic/eerste-menu-item-moet-een-andere-stijl-krijgen/#post-17833)
 * Dat kan je hier niet aan zien..
 * Je moet even de code copy-/pasten uit je html pagina. Je bent nu in .php aan 
   het kijken das erg irritant omdat je niet kan zien welke class iets krijgt.
 * Als je site online staat erg post even een link naar de pagina of kijk in de 
   broncode en post hier je menu-bar in html.
 *  Thread starter [Nientje07](https://nl.wordpress.org/support/users/nientje07/)
 * (@nientje07)
 * [15 jaren, 8 maanden geleden](https://nl.wordpress.org/support/topic/eerste-menu-item-moet-een-andere-stijl-krijgen/#post-17838)
 * Dit is de html code vanuit de broncode.
 *     ```
       <div id="nav1">
       	<div class="menu1">
       		<div class="in">
       				<ul>
       				<li class="page_item page-item-28 current_page_item"><a href="http://srv007.atait.local/wordpress/">Home</a></li>
   
       				<li class="page_item page-item-101"><a href="http://srv007.atait.local/wordpress/?page_id=101">Referenties</a></li>
       <li class="page_item page-item-206"><a href="http://srv007.atait.local/wordpress/?page_id=206">Over ATA IT</a></li>
       				</ul>
   
       		</div>
       		</div>
       	</div>
       ```
   
 * In deze html staat het eerste item (home) al afzonderlijk. (zoals ik heb getoond
   in de laatste phpcode uit mijn vorige post.)
 *  [Jaja..](https://nl.wordpress.org/support/users/jaja-1/)
 * (@jaja-1)
 * [15 jaren, 8 maanden geleden](https://nl.wordpress.org/support/topic/eerste-menu-item-moet-een-andere-stijl-krijgen/#post-17839)
 * Probeer eens dit aan je stylesheet toe te voegen:
 *     ```
       .menu li.page-item-28 a {
            color: #ff0000;
       }
       .menu li.page-item-28 a:hover {
            color: #f1f1f1;
            text-transform: underline;
       }
       ```
   
 * En stijlwaardes kan je zelf aanpassen naar smaak.
 *  Thread starter [Nientje07](https://nl.wordpress.org/support/users/nientje07/)
 * (@nientje07)
 * [15 jaren, 8 maanden geleden](https://nl.wordpress.org/support/topic/eerste-menu-item-moet-een-andere-stijl-krijgen/#post-17840)
 * Dat is het nog niet helemaal.
 * Als ik nu op het item ga staan, krijgt hij niet de juiste opmaak. hij krijgt 
   dezelfde opmaak als wanneer ik op een ander item ga staan.
    wanneer ik op de 
   homepagina ben (en het item dus geselecteerd is.) toont hij het wel correct. 
   Wanneer ik op een andere pagina ben/een ander item selecteer, dan behoudt hij
   de zwarte achtergrond (zoals wanneer hij geselecteerd is). de tekstkleur veranderd
   wel.
 * dit is de opmaak die ik opgegeven heb:
 *     ```
       .menu li.page-item-28 a {
        	background: url('images/menu_hover.gif') no-repeat left;
       	color:#fff;	}
   
       	.menu li.page-item-28 a:hover {
       	background: url('images/menu_hover.gif') no-repeat left;
       	color:#FFF;
       	}
       ```
   
 * Welke informatie heb je nog nodig?
    alvast bedankt
 *  Thread starter [Nientje07](https://nl.wordpress.org/support/users/nientje07/)
 * (@nientje07)
 * [15 jaren, 8 maanden geleden](https://nl.wordpress.org/support/topic/eerste-menu-item-moet-een-andere-stijl-krijgen/#post-17879)
 * Ik heb nog enkele kleine wijzigingen aangebracht aan de css en nu werkt het zoals
   ik het wel.
 * dit is mijn code
 *     ```
       .menu li.current_page_item.page-item-28 a {
        	background: url('images/menu_hover.gif') no-repeat left;
       	color:#fff;	}
   
       	#nav ul li.page-item-28 a:hover {
       	background: url('images/menu_hover.gif') no-repeat left;
       	color:#FFF!important;
       ```
   
 * Bedankt voor je hulp Jaja.. zonder jou had ik het nooit gevonden.

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)

 Het onderwerp ‘Eerste menu-item moet een andere stijl krijgen’ is gesloten voor
nieuwe reacties.

 * In: [Algemeen WordPress](https://nl.wordpress.org/support/forum/algemeen/)
 * 5 reacties
 * 2 deelnemers
 * Laatste antwoord van: [Nientje07](https://nl.wordpress.org/support/users/nientje07/)
 * Laatste activiteit: [15 jaren, 8 maanden geleden](https://nl.wordpress.org/support/topic/eerste-menu-item-moet-een-andere-stijl-krijgen/#post-17879)
 * Status: opgelost

## Onderwerpen

### Meest populaire onderwerpen

### Onderwerpen zonder reacties

### Non-support onderwerpen

### Opgeloste onderwerpen

### Onopgeloste onderwerpen

### Alle onderwerpen