We have already talked about the importance of making life easier for our visitors and improve the user experience. Therefore, if there is an element in our header or navigation menu where we want users to click, we will give more importance and highlight to make it more visual. So we will add CSS classes to an element of the WordPress menu.
To apply a style or design to a specific menu item on WordPress we have two options:
First we can use advanced CSS selectors selecting the position relative to other elements (the first, fourth or last) with the pseudo-selectors: first-child, :last-child or the similar. This requires a little skill and good practice for writing good CSS rules.
The second option is much simpler than using the functionality of WordPress to add a particular class to the item you want to highlight. For our example we will use the demo site of the template for blogs Rosalie and highlight the item to be the Contact page.
Activating functionality to add CSS classes to the menu page
This WordPress Core functionality is often hidden in our administration panel, but making it show up is really simple. To do this we need to access our administration panel (you know, through the address mywebsite.com/wp-admin/) and once inside go to the menu Appearance> Menus.
From there you can create your WordPress custom menu. If you have any questions on how to create one or adding an item without link, I recommend you to take a look at this tutorial on menus in WordPress. From here you also have access to settings of social menus, as is the case of Rosalie, the template we are using as an example.
Once you created your menu, you will click on the “Screen Options” located in the upper right corner tab.
This will bring up a menu with various options and checkbox. With this display only we activate this functionality, but even if is not enabled, this still will work, so these selectors are only for display or not display these options.
What interests us is the “CSS Classes” option to add to each of our menu items a different class and give a unique style to each page or link. Select it to activate.
Once activated you can find on this page the item you want to give a unique style. When you find it, you click on it and see how a new picture called “CSS Classes (optional)” is displayed. This is the one you will use.
CSS classes that we want to add should go ahead without the point after use to select them, and if we want to add several, we should always leave a space between them. To learn more about how to properly name a class in CSS, you can serve this article.
For this example we have introduced the class “highlight-menu” to the “Contact”, which is the page that we want to highlight. We have only to save it in the bottom right and we will have our class published.
Styling to the CSS class added to the menu
Now it starts the fun part: styling our item. As we want it to be a striking element that invites visitors to click on the link, we chose to apply a green background and white font colour. To do this, we will give style to that item with the following CSS. Here are the correct choices about how to add CSS to WordPress:
.destacado-menu > a {
background-color: #8bc34a;
color: #fff;
}
If we analyse the above case, the menu WordPress is an unordered list item in HTML, and if you inspect a little the code, you will see how the HTML class is added to the li element, so if you want to style the link, you must select the link that is at one level of hierarchy. If the above code does not work, it may be that the style sheet of your theme is using a more complete selector. To do this you have two options:
Use a more complete selector:
#page .nav-menu .destacado-menu > a {
background-color: #8bc34a;
color: #fff;
}Or add !important (the first option is better!)
.destacado-menu > a {
background-color: #8bc34a !important;
color: #fff !important;
}And we are ready!, we have our menu consists of a singular and striking element for our visitors, very useful to guide them to a contact page or a page that works as a call to action.
Other ideas to highlight a menu item
Once we have selected the CSS element we can apply any style. From colours, font size changes to a particular typeface, (here are a few to choose from.)
As we have seen, with just a few simple steps we can customize a WordPress template to give our own design and highlight a menu item or get a header with a great design. I hope it has been useful!
