Vous souhaitez styliser vos menus de navigation WordPress pour en modifier les couleurs ou l’apparence ?
Bien que votre thème WordPress gère l’apparence de vos menus de navigation, vous pouvez facilement le personnaliser à l’aide de CSS pour répondre à vos prérequis.
Dans cet article, nous allons vous afficher comment styliser les menus de navigation de WordPress sur votre site.
Nous allons vous afficher deux méthodes différentes. La première méthode est la meilleure pour les débutants, car elle requiert une extension et ne nécessite aucune connaissance en codage. La seconde méthode est destinée aux utilisateurs/utilisatrices intermédiaires qui préfèrent utiliser le code CSS plutôt qu’une extension.
Ensuite, nous vous donnerons plusieurs exemples de la manière dont vous pouvez personnaliser le design de votre menu de navigation.
Vous pouvez utiliser les liens ci-dessous pour naviguer rapidement dans l’article :
- Méthode 1 : Styliser les menus de navigation de WordPress à l’aide d’une extension
- Méthode 2 : Styliser manuellement les menus de navigation de WordPress
- Modifier la couleur de la police dans les menus de navigation de WordPress
- Modifier la couleur d’arrière-plan de la barre de menu de navigation
- Modifier la couleur d’arrière-plan d’un seul article de menu
- Ajouter des effets de survol aux menus de navigation de WordPress
- Créer des menus de navigation épinglés et flottants sur WordPress
- Créer des menus de navigation transparents dans WordPress
- Modifier le style des premiers et derniers éléments de menu
Méthode 1 : Styliser les menus de navigation de WordPress à l’aide d’une extension
Votre thème WordPress utilise le CSS pour styliser les menus de navigation. De nombreux débutants ne sont pas à l’aise avec la modification des fichiers de thème ou l’écriture de code CSS par eux-mêmes.
C’est à ce moment-là qu’une extension de style WordPress s’avère très utile. Il vous enregistre de modifier les fichiers du thème ou d’écrire du code.
Tout d’abord, vous devez installer et activer la bannière d’accroche CSS Hero. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
CSS Hero est une extension WordPress premium qui vous permet de concevoir votre propre thème WordPress sans écrire une seule ligne de code, aucun HTML ou CSS n’est nécessaire. Avis sur CSS Hero pour en savoir plus.
Les utilisateurs/utilisatrices de WPBeginner peuvent utiliser ce Code promo CSS Hero pour obtenir une remise de 34% sur leur achat.
Lors de l’activation, vous serez redirigé pour obtenir votre clé de licence CSS Hero. Suivez simplement les instructions à l’écran, et vous serez redirigé vers votre site en quelques clics.
Ensuite, vous devez cliquer sur le bouton » Personnaliser avec CSS Hero » dans la barre d’outils d’administration de WordPress.
CSS Hero propose un éditeur WYSIWYG (what you see is what you get). En cliquant sur le bouton, vous accédez à votre site et le volet CSS Hero est visible à gauche de l’écran.
Pour commencer les modifications, il suffit de cliquer sur l’élément à modifier.
Vous devez déplacer votre souris sur votre menu de navigation et CSS Hero le mettra en évidence en affichant les bordures qui l’entourent. Lorsque vous cliquez sur le menu de navigation mis en évidence, il vous affiche les éléments que vous pouvez modifier.
Dans la capture d’écran ci-dessus, vous voyez le conteneur du menu de navigation principal. CSS Hero vous permet de modifier l’arrière-plan, la typographie, les bordures, les espaces, les listes et les modifications.
Vous pouvez cliquer sur n’importe quelle propriété que vous souhaitez modifier. Supposons que nous voulions modifier la couleur d’arrière-plan de notre menu de navigation. Une fois que vous avez cliqué sur la propriété « Arrière-plan », CSS Hero affiche une interface simple dans laquelle vous pouvez effectuer vos modifications.
Ici, vous pouvez sélectionner la couleur d’arrière-plan, le dégradé, l’image, et plus encore. Au fur et à mesure des modifications, vous pourrez les voir en direct dans la Prévisualisation du thème.
Une fois que vous êtes satisfait des modifications, n’oubliez pas de cliquer sur le bouton « Enregistrer et publier » pour stocker vos modifications.
L’avantage de cette méthode est que vous pouvez facilement annuler les modifications que vous avez apportées. CSS Hero conserve un historique terminé de toutes vos modifications, et vous pouvez aller et venir entre ces modifications.
Méthode 2 : Styliser manuellement les menus de navigation de WordPress
Cette méthode nécessite que vous ajoutiez manuellement du CSS personnalisé et est destinée aux utilisateurs/utilisatrices intermédiaires. Pour en savoir plus, consultez notre guide sur la façon d’ajouter facilement des CSS personnalisés à votre site WordPress.
Les menus de navigation de WordPress s’affichent sous la forme d’une liste non ordonnée (à puces). Si vous utilisez l’identifiant de menu par défaut de WordPress, il affichera une liste sans aucune classe CSS associée.
<?php wp_nav_menu(); ?>
La liste non ordonnée portera le nom de classe menu, chaque élément de la liste ayant sa propre classe CSS.
Cela peut fonctionner si vous disposez uniquement d’un emplacement de menu. Cependant, la plupart des thèmes disposent de plusieurs emplacements où vous pouvez afficher des menus de navigation. L’utilisation uniquement de la classe CSS par défaut peut entraîner un conflit avec les menus situés à d’autres emplacements.
C’est pourquoi vous devez également définir une classe CSS et l’emplacement du menu. Il y a de fortes chances que votre thème WordPress le fasse déjà en ajoutant les menus de navigation à l’aide d’un code comme celui-ci :
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
Ce code indique à WordPress que c’est ici que le thème affiche le menu principal. Il ajoute également une classe CSS primary-menu au menu de navigation.
Vous pouvez maintenant styliser votre menu de navigation à l’aide de cette structure CSS.
// 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 {}
Vous devrez remplacer #header par la classe CSS du conteneur utilisé par votre menu de navigation.
Cette structure vous aidera à modifier complètement l’apparence de votre menu de navigation.
Cependant, il existe d’autres classes CSS générées par WordPress et ajoutées automatiquement à chaque menu et élément de menu. Ces classes vous permettent de personnaliser davantage votre menu de navigation.
// 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 vous permet également d’ajouter vos propres classes CSS personnalisées aux différents articles du menu. Vous pouvez utiliser cette fonctionnalité pour styliser les éléments du menu, par exemple en ajoutant des images Icône à vos menus ou en modifiant simplement les couleurs pour mettre en valeur un élément du menu.
Rendez-vous sur la page Apparence » Menus dans l’interface d’administration de WordPress et cliquez sur le bouton Options d’écran.
Une fois cette case cochée, vous constaterez qu’un champ supplémentaire est ajouté lorsque vous modifiez chaque élément du menu.
Vous pouvez maintenant utiliser cette classe CSS dans votre feuille de style pour ajouter votre CSS personnalisé. Cela affectera uniquement l’élément de menu avec la classe CSS que vous avez ajoutée.
Exemples de styles de menus de navigation dans WordPress
Différents thèmes WordPress peuvent utiliser différentes options de style, classes CSS et même JavaScript pour créer des menus de navigation. Cela vous donne beaucoup d’options pour modifier ces styles et personnaliser vos menus de navigation en fonction de vos propres prérequis.
L’outil inspect de votre navigateur web sera votre meilleur ami lorsqu’il s’agira de savoir quelles classes CSS modifier. Si vous ne l’avez jamais utilisé auparavant, jetez un coup d’œil à notre guide sur l’utilisation de l’outil inspect pour personnaliser les thèmes WordPress.
Il suffit de pointer le curseur sur l’élément à modifier, de cliquer avec le bouton droit de la souris et de sélectionner « Inspecter » dans le menu du navigateur.
Note : avec ce thème, « primary-menu-list » est l’ID CSS du menu de navigation, et « menu-wrapper » est sa classe CSS.
Ceci étant dit, voyons quelques exemples concrets de menus de navigation stylisés dans WordPress.
1. Modifier la couleur de la police dans les menus de navigation de WordPress
Voici un exemple de CSS personnalisé que vous pouvez ajouter à votre thème pour modifier la couleur de la police des menus de navigation.
#primary-menu-list li.menu-item a {
color:#ff0000;
}
Dans cet exemple, le #primary-menu-list est l’ID assigné à la liste non ordonnée qui affiche notre menu de navigation. Vous devrez utiliser l’outil d’inspection pour trouver l’ID utilisé par votre thème.
2. Modifier la couleur d’arrière-plan de la barre de menu de navigation
Tout d’abord, vous devez trouver l’ID ou la classe CSS utilisée par votre thème pour le conteneur entourant le menu de navigation.
Ensuite, vous pouvez utiliser le CSS personnalisé suivant pour modifier la couleur d’arrière-plan de la barre de menu de navigation.
.menu-wrapper {
background-color:#bdd1cd;
}
Voici ce que cela donne sur notre site de démonstration.
3. Modifier la couleur d’arrière-plan d’un seul élément de menu
Vous avez peut-être remarqué que de nombreux sites utilisent une couleur d’arrière-plan différente pour les liens les plus importants de leur menu de navigation. Ce lien peut être un bouton de connexion, d’inscription, de contact ou d’achat. En lui donnant une couleur différente, le lien est plus perceptible.
Pour ce faire, nous allons ajouter une classe CSS personnalisée à l’élément de menu que nous voulons mettre en évidence avec une couleur d’arrière-plan différente.
Allez dans Apparence » Menus et cliquez sur le bouton Options d’écran dans le coin supérieur droit de l’écran. Vous verrez apparaître un menu déroulant dans lequel vous devrez cocher la case située à côté de l’option « Classes CSS ».
Ensuite, vous devez défiler vers le bas jusqu’à l’élément de menu que vous souhaitez modifier et cliquer pour le déplier. Vous remarquerez une nouvelle option permettant d’ajouter votre classe CSS personnalisée.
Une fois le menu enregistré, vous pouvez utiliser cette classe CSS pour modifier le style de l’élément de menu concerné.
.contact-us {
background-color: #ff0099;
border-radius:5px;
}
Voici ce que cela donne sur notre site de test.
4. Ajouter des effets de survol aux menus de navigation de WordPress
Voulez-vous que les éléments de votre menu changent de couleur au passage de la souris ? Cette astuce CSS particulière donne à vos menus de navigation un aspect plus interactif.
Il suffit d’ajouter le CSS personnalisé suivant à votre thème.
#primary-menu-list li.menu-item a:hover {
background-color:#a6e4a5;
color:#666;
border-radius:5px;
}
Dans cet exemple, #primary-menu-list est l’ID CSS utilisé par votre thème pour la liste non ordonnée du menu de navigation.
Voici ce que cela donne sur notre site de test.
5. Créer des menus de navigation épinglés et flottants dans WordPress
Normalement, les menus de navigation apparaissent en haut et disparaissent lorsque l’utilisateur défile vers le bas. Les menus de navigation flottants épinglés restent en haut lorsque l’utilisateur défile vers le bas.
Vous pouvez ajouter le code CSS suivant à votre thème pour rendre vos menus de navigation épinglés.
#primary-menu-list {
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-left:10px
}
Remplacez simplement #primary-menu-list par l’ID CSS de votre menu de navigation.
Voici ce que cela donne dans notre démo.
Pour des instructions plus détaillées et une méthode alternative, consultez notre guide sur la création d’un menu de navigation flottant épinglé dans WordPress.
6. Créer des menus de navigation transparents dans WordPress
De nombreux sites utilisent des images d’arrière-plan de grande taille ou en plein écran pour leurs boutons d’appel à l’action. L’utilisation de menus transparents permet à votre navigation de se fondre dans l’image. Les utilisateurs/utilisatrices sont ainsi plus enclins à se concentrer sur votre appel à l’action.
Il suffit d’ajouter l’exemple de CSS suivant à votre thème pour rendre vos menus de navigation transparents.
#site-navigation {
background-color:transparent;
}
Voici ce que cela donne sur notre site de démonstration.
En fonction de votre thème, vous devrez peut-être ajuster la position de l’image de l’en-tête afin qu’elle couvre la zone située derrière vos menus transparents.
7. Style des premier et dernier éléments de menu
Vous pouvez ajouter un style personnalisé aux premiers et derniers articles de votre menu de navigation WordPress en ajoutant une classe .first et .last. Cela permet de s’assurer que les bons articles seront stylisés même si les éléments de votre menu sont réorganisés.
Vous devez ajouter l’extrait de code suivant au fichier functions.php de votre thème :
function wpb_first_and_last_menu_class($items) {
$items[1]->classes[] = 'first';
$items[count($items)]->classes[] = 'last';
return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');
Cela crée les classes CSS .first et .last pour les premiers et derniers éléments de votre menu de navigation respectivement. Vous pouvez utiliser ces classes pour styliser les éléments du menu.
Par exemple, vous pouvez ajouter cette mise en forme CSS à la feuille de style style.css de votre thème pour mettre en gras le premier et le dernier article du menu.
.first a {font-weight: bold;}
.last a {font-weight: bold;}
Voici ce que cela donne sur notre site de démonstration.
En savoir plus et pour apprendre à obtenir le même effet à l’aide de sélecteurs CSS, consultez notre guide sur l ‘ajout de la première et de la dernière classe CSS aux éléments de menu WordPress.
Nous espérons que cet article vous a aidé à apprendre comment styliser les menus de navigation de WordPress. Vous voudrez peut-être aussi apprendre comment ajouter un menu WordPress responsive adapté aux mobiles, ou consulter notre liste d’astuces pour accélérer les performances de WordPress.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Sydney Peason says
The « Menu » option has disappeared under my « Appearance » menu option > is there another way to see the container CSS of my menu and options?
Thanks!
WPBeginner Support says
IF you’re using a block theme that does not have the appearance menu then you can use Inspect element to see the CSS container information. You can see our guide below on using Inspect Element:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrateur
Kristyna says
Hello, I need advice, please:
I have successfully added CSS to make one of my menu items different in color. However, when I scroll down, my fixed navigation primary menu comes down with me, and the changed color of that one item changes back to its original – How do I keep the new color of that one item even when scrolling down?
Thanks!
WPBeginner Support says
Your theme may modify the menu when you are scrolling down. If you use inspect element you should be able to select the menu item while scrolled down to add your CSS. We have a guide on using inspect element you can take a look at below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrateur
Venkat Vavilala says
Hi,
I want to increase menu font size. How can I do this?
If it is default, then how can I customize?
Please show me easy method to increase the menu font size
WPBeginner Support says
It would depend on which method from this article you plan on using. As an example, if you use the CSS method then you would use inspect element the same as under method 2’s examples and modify the font-size
Administrateur
Budi Santoso says
Hello Admin.
How the Orange ribbon navigation menu in this site was made?
Thanks
WPBeginner Support says
To understand that you would want to take a look at our guide on using inspect element here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrateur
maria says
how did you make the menu for this site
did you have to edit the theme files ?
thanks
WPBeginner Support says
Our theme was one we custom created
Administrateur
Trish says
I am wanting to create a menu on the shop page of my woo commerce site, horizontally, that has all the categories of product that is sold. How can I do that, please? Thank you all for your help in advance.
WPBeginner Support says
If your theme has a menu in that location you could set up a normal menu using:
https://www.wpbeginner.com/beginners-guide/how-to-add-navigation-menu-in-wordpress-beginners-guide/
Then, you can use conditional logic to only have it appear on your shop page using our article here: https://www.wpbeginner.com/plugins/how-to-add-conditional-logic-to-menus-in-wordpress/
Administrateur
Kushal Sonwane says
Though it was a great task to do, but after reading this article, it is very simple to customise navigation menus.
Thanks.
WPBeginner Support says
You’re welcome
Administrateur
Lisa says
I am very new to doing this and I am creating a site in WP using the theme Oceanwp. I have done as you have suggested by clicking on CCS from the menu. I am trying to remove the arrow on my drop down menu and nothing I try works at removing it.
Thanking you in advance for any help.
WPBeginner Support says
Hi Lisa,
You may want to reach out to theme authors, they would be able to help you with that.
Administrateur
Anirudhya says
sir which theme you are using. iam starting a wordpress blog,i want a simple layout blog for my educational purpose.
WPBeginner Support says
Hi Anirudhya,
We are using a custom theme made specifically for WPBeginner.
Administrateur
Bobby says
Hi, how about with HTML code?
I want to add a header to the neseted menus. But I don’t kow where or how to put it.
Daniela says
Hi,
I Would like to change the appearance of only the menu I have added for my salespage. I would like to change the height and add a logo.
I am not a pro and I have tried some things to see if anything changes in the menu, but it doesn’t. This is what I have tried:
#Salespage-menu {
background:#2194af;
height:40px;
}
Can you please help me on my way?
Thank you so much for your effort!
Eugene says
Hi Guys,
I have an issue with my nav menu that I really would be glad of some help with pleas… The primary menu itself is perfect looking, the problem is with the submenu which drops down with a large gap approx 100px or so in size between it and the parent above.
When I try to navigate onto the submenu it simply disappears from view.
I have tried everything I can think of so far to move it directly up under the parent menu so that it will remain open and clickable but I have failed so far.
This is the Custom CSS being used for the Point Theme:
#logo {
margin: 0;
}
.site-branding {
padding: 0;
}
.post-info {
display: none;
}
#navigation ul li a {
min-height: 22px;
padding: 5px 10px 5px 10px;
}
.post-date {
display: none;
}
Thanks and Regards.
WPBeginner Support says
Hi Eugene,
We are not sure what may be causing this issue. It depends on your theme’s CSS and layout and which classes they have used. You can try this custom CSS:
.primary-navigation li ul { margin:0px; padding:0px; }1-click Use in WordPress
Administrateur
Eugene says
I’m sorry to say, that didn’t work either…
Thanks for trying, it seems there’s a new theme called for.
Regards.
Amirul Farhan says
Hello.
Is the plugin works even though with the theme purchased have its own menu design?
Thanks
Rida says
if you want to use bootstrap you simply add the css classes of your own with simple one line code on your header.php
‘primary’, ‘container’ => ‘div’, ‘container_class’ => ‘collapse navbar-collapse’, ‘menu_class’ => ‘nav navbar-nav pull-right’, ‘menu_id’ => ‘primary-menu’ ) ); ?>
Dhany says
Yeay..another PLUGIN you guys share how to use PLUGIN sooo much, not exactly use wordpress…great job
WPBeginner Support says
Hi Dhany,
Thanks for the feedback. At WPBeginner, our target audience is mostly beginner level users. Most of them are not familiar with CSS, HTML, PHP, etc. Plugins make it easier for them to get things done without breaking their websites.
Administrateur
Andrew says
Dude…it says ‘beginner’ in the URL.
Plus…they laid out a manual option halfway through.
Malin says
Hi! I desperately need help with my menu on the site using Baskerville theme. With the latest update the menu has gone completely bananas! Please HELP!
Malin
Raymond says
This helped me a lot when I was trying to figure out how to get my styles from a bootstrap theme to work in WordPress. Thank you
Samseen says
Nice Post here,
However, how can one target a particular item in the list. I actually did a work-around at this time, but I will want to target that particular menu item.
Say for example, I want to have a different background color for the menu of that particular item. How can this be done?
Marko says
Inspect element tool in Chrome, Firefox.
benjamin says
Hello guys am new in coding, please I need real help here I have a WordPress site and my site theme is Baskerville , this theme support only one menu am trying to create navigational menus to my curious pages, please if there is code for doing that please where can I place it ,please I’ll so much appreciate a reply thank you.
Arsh Dznr says
i m ussing my css menu in wordpress but menus dropdown not showing pls help me
thanxxxxxxxx
umanga says
did you add your scripts into function.php properly ?
Andika Amri says
Hello wpbeginner, nice tuts!
I am using vantage theme, already put custom class in one of my menu = « .menu-about », but when i’m styling it stylesheet.css, its not applicable at all, do you have any suggestion at all?
thanks!
shaon says
I am using twenty Twelve theme. Already made changes to my menu with different colors. But i cant move the navigation menu position on the header, it got too much space at bottom from the baseline of the header . I want it touching the bottom of the header.
Niveditha says
Hi,
I have created a main menu in header and a footer menu using the wordpress codex. Now my two menus sit vertically on my page. How to code them for horizontal menus?
Please help out, this is real urgent!
TIA
WPBeginner Support says
For that you need to use CSS. Study the code in the default themes, the best example would be twenty thirteen or twenty twelve themes.
Administrateur
Judy says
I would kill for an infographic for what all those classes actually modify. Like:
.current-page-ancestor
.current-menu-parent
.current_menu_parent
.current-page-parent
.current_page_parent
.current-menu-ancestor
and what the difference is between the dashes/underscores like in .current-menu-parent vs .current_menu_parent
i will make one for you if you explain it to me!
thank you…
Tarmizi Achmad says
thx about information…
Yogesh Kumar says
hey i want to ask a very important thing
Like the bar shown on your website’s nav bar above for the link Blog shows 8 links as we move our cursor on that …now my site’s are also showing in the same style but i want them to be displayed in such a manner that when i will move my cursor over it will show the 8 links side by side means 4-4……Please sir i am in a great need of this …please reply to this asap…
Editorial Staff says
Usually menus are organized in unordered lists ul. When you have sub navigation or dropdowns, then are its own unordered list inside a list element. So an example CSS class that you would be modifying would be like:
ul.menu li ul{width: 220px;}
ul.menu li li{float: left; width: 100px;}
Now this would set each second level list item to have an exact width and float left.
Administrateur
Jim says
Great article, thanks.
I never new about that CSS class feature, at least I know now.
Its really going to benefit me.
Thanks.
Nilamkumar Patel says
This is very helpful. Prior to this, I had understanding that we can’t add custom classes in wordpress from admin and I always used to do it in functions.php, but this is awsome. These people are rockers. And many thanks to Sayed for this helpful post
wiseroner says
great tutorial!! but how do i do something as simple as change the font size? what do i enter in to change the font size? thank you!
wpbeginner says
@wiseroner You cant just add the font-size in the main menu class in your css file.
wpbeginner says
@mriulian Look in the tutorial above… the classes for current pages are already defined…
In the header code, you need to define the menu container ID and container class… follow the article as it says, and it will work.
mriulian says
Just trying to be more clear, this is my code:
// in the function page
if (function_exists(‘register_nav_menus’)) { register_nav_menus( array( ‘mainNav’ ) ); }
// in the header page
‘main_nav_menu’)); ?>
// in the css file
.current{ background-color: #0188AA; color: #fff; text-decoration: none; }
How do I apply this class to my navigation? ( very easy in a static html page but apparently pretty complicated in wordpress).
Thanks in advance
mriulian says
This is what I did but it doesn t work. I registered my menu in the
functions page and then I called it from the header page as my main
navigation. Now, I have a . current class in my stylesheet to be applied
to the current page but it is not obvious how to do that.
Can you help with a suggestion?
wpbeginner says
The way WordPress navigation menus work, it will automatically know which page is the current one..
iirimina says
Thank you for mentioning about the css classes in the screen options panel. The problem that I have with my navigation is how to style the nav menu so that each menu item gets a specific background color when you arrive at a certain page. You mention creating a class such as .current_page_item{} in your style sheet. But how to apply this class in the header.php?
Rick says
Where can I get further more detailed info on how to add the icons to the menu names. Whats a real good css guide for doing alot of these things you outlined here?
Thanks
Editorial Staff says
CSS-Tricks is a good forum, but you should probably look at CSS for Beginner books to learn CSS. Because all you are doing is adding a background image.
Administrateur
Francisco says
Hello. I absolutely loved this post and found it very useful, particularly the option to set individual CSS classes, so many thanks for this information.
What I was wondering is if it would be possible to dynamically assign CSS classes from the php wp_nav_menu function call to certain types of elements, for instance, to parent menu items only. That way, you wouldn’t have to manually add that class in the Menu Screen every time a new type element (in the example, a new parent item) is created.
Any thoughts on that would be greatly appreciated,
Editorial Staff says
Yes, you would utilize Menu Class parameter for that.
Administrateur
Francisco says
That’s what I was thinking. Thanks for confirming, and for getting back to me.
Cheers!
Jayesh says
nice article.
I want to change out put of wp_nav_menu().
I do not like HTML generated by wp_nav_menu().
I have my own nice HTML for Menu I want.
so I wanted to modify HTML structure generated by wp_nav_menu().
is this possible ?
Kindly advise asap.
Editorial Staff says
You can add your own divs etc, but it will always be the list output. You can style it to be however you want.
Administrateur
chunky says
Thank you! Now I can stop pulling my hair out! Bookmarked this and will tell others!
Kalid says
hi, thank for the tutorial. it would be nice if you guide me to have the nav menu used in your theme. Id like to have a drop-down menu like yours. tnks!
Editorial Staff says
The WordPress default navigation menu lets you have drop down menus. Just drag them a little to the right of the main item, and it is possible. If you use a framework like Genesis, it already has Fancy Drop down option available, so you can simply select that. Or you can utilize jQuery techniques like SuperFish to do this. We may add a tutorial in the future.
Administrateur
tuba says
very nice article, helped me for my wordpress project, thanks!
GrimCris says
Great article. I didn’t know about the CSS classes in WordPress Menus. Thank you so much!
Keith Davis says
You guys know your WordPress.
This is not an easy tutorial but well explained and certainly adds to my understanding.
Appreciate you educating the rest of us.
Rick says
Dude! Awesome! I had no idea about CSS option for menus! Rad-a-tad
Adam W. Warner says
Great write up, super informative! I didn’t realize the screen options for menus either.
Eli says
I’m not sure in what you should place the first php wp_nav_menu code. Would it be in the functions file or header or…?
Tony says
Didn’t know about the CSS Classes menu item! Thanks for pointing that out.
Editorial Staff says
You are welcome
Administrateur
Steve Meisner says
Me neither! That was exactly what I needed. God bless you all and the WordPress dev team!
Pieter says
Respect for pointing out the css styles! I always used the css attribute to style a list item, but these styles are definitely more handy. You just earned yourself another feed subscriber!
Regards from Belgium.
Editorial Staff says
Glad we were able to help Pieter.
Administrateur