Have you ever seen a WordPress site where each menu item had a different background colour, or some menu items have different font size, or menu items with icons in them? Have you wanted to give your WordPress site this look, without installing a plugin that can increase site load time or become deprecated, or spending money on a premium plugin?
With this tutorial, you’ll learn how to give each item in your WordPress menu a unique look, simply by using some CSS.
You will learn the basics of the following:
- Finding The CSS Element For The Menu Item(s) You Want to Customise
- Changing The Font Colour
- Changing The Font Colour on Hover
- Changing the Font Colour on Current Page/Menu Item
- Changing the Font Size
- Changing The Background Colour with States
- Adding Icons to Menu Items with States
- Combining Multiple Changes to Same Menu Item
- Adding the Same New Style to Multiple Menu Items
Finding The CSS Element For The Menu Item(s) You Want to Customise
The first thing you need to do, is locate the CSS element for the menu item(s) you want to change. There are two way to do this.
The first way is to CTRL+SHIFT+I, or right-click – Inspect in Chrome.
Personally, I recommend “right-click – Inspect” on the specific menu item you are looking for.
If you “right-click – Inspect” on the specific menu item, you’ll see something like the following:
The information after “li id=” is what you are looking for.
The second way is to find the number in your WordPress dashboard via Appearance – Menus.
If the thought of inspecting CSS classes and elements, and trying to make heads or tales of it causes you to break out in cold sweats, there is another way.
When you are in your menus manager, click the right drop-down menu on the item you want to customise:
Once that is open, you’ll see a link that reads, “Cancel.” Hover over “Cancel,” and a URL will show up in the bottom-left of your browser:
It’s the last bit of information in the URL that you will need, minus “settings.”
Either way you look for the information, in my example, the CSS element I want, so that I can customise the “News” menu item, is: #menu-item-368.
Throughout this tutorial, I’m going to use the above element, and tell you which items to change to suit your needs.
You don’t want to add this CSS to your theme’s existing CSS because it would be deleted next time your theme is updated. You want to add it to the custom CSS area found in the “Appearance” menu in your dashboard.
Changing The Font Colour
In this example, I want to change the font colour.
The code I would add to my CSS would look like this:
#menu-item-368 a {
color: #FFFFFF !important;
}
There are two elements in that code that are important to include: “a” and “!important.”
“a” is the hyperlink element. If your menu item is not linked, then you would not include the “a”.
“!important” needs to be added to override the default style applied to the current menu item.
I’m using #FFFFFF (white) in this example, because it is easy. But you would change “#FFFFFF” to the desired HEX code for the colour you want.
You would also need to replace the number in the #menu-item-XXX element, with the number you found in the first step.
Changing The Font Colour on Hover
So, now you want to give your menu item its own colour when someone hovers over the link. From this point forwards, all of the things you would change are in bold.
The CSS I would add to my CSS would look like this:
#menu-item-368 a:hover {
color: #000000 !important;
}
Changing The Font Colour on Current Page/Menu Item
You may want to go a step further and have another font colour used when someone is actively visiting the page that is linked in your menu item.
The CSS I would use in this example is:
.current_page_item.menu-item-368 a {
color: #333333 !important;
}
Changing The Font Size
Now, you want to make some menu items really stand out by either increase or decreasing the default font size.
The CSS I would use in this example is:
#menu-item-368 a {
font-size: 20px !important;
}
If you want it smaller, you would decrease the number.
If you also want to change the font size for different states, then write more CSS, but add “:hover” and “.current_page_item” as appropriate, and change the “font-size” value again.
Example:
#menu-item-368 a:hover {
font-size: 22px !important;
}
.current_page_item.menu-item-368 a {
font-size: 18px !important;
}
Changing the Background Colour with States
Now, you really want a specific menu item to stand out, so you want to give it a different background colour.
The CSS I would use in this example is:
#menu-item-368 a {
background-color: #000000 !important;
}
If you also want to change the background colour for different states, then write more CSS, but add “:hover” and “.current_page_item” as appropriate, and change the “background-color” value again.
#menu-item-368 a:hover {
background-color: #FFFFFF !important;
}
.current_page_item.menu-item-368 a {
background-color: #F1F1F1 !important;
}
Adding Icons to Menu Items with States
The first thing you want to do is upload the icons you want to use into your media library. Once that is done, copy and paste the URLs for those images in a handy-dandy place.
The CSS I would use in this example is:
#menu-item-368 {
background-image: url(https://skookummonkey.com/wp-content/uploads/news1.png);
background-position: left;
background-repeat: no-repeat;
background-size: 25px 25px;
min-width: 110px;
text-align: right;
}
If you upload your image at the desired size, then there is no need to add the “background-size” element. If not, then you change it according to desired size.
You’d change the “min-width” value to whatever works to make the spacing between the icon and the text look pleasing to the eye.
There should not be a need for the “!important” tag for this step. But, if it doesn’t work, then add it.
If you also want to change the icon for different states, then write more CSS, but add “:hover” and “.current_page_item” as appropriate, and simply include the “background-image” element with new image URLs, like so:
#menu-item-368:hover {
background-image: url(https://skookummonkey.com/wp-content/uploads/news2.png);
}
.current_page_item.menu-item-368 {
background-image: url(https://skookummonkey.com/wp-content/uploads/news3.png);
}
The rest of the elements will stay applied as default.
Combining Multiple Changes to Same Menu Item
Say you want to change both the font size and colour of a simple menu item.
The CSS I would use in this example is:
#menu-item-368 a {
color: #FFFFFF !important;
font-size: 20px !important;
}
And if you wanted to apply multiple changes to states, once again, add :hover and “.current_page_item”, changing the values, as appropriate.
#menu-item-368 a:hover {
color: #000000 !important;
font-size: 22px !important;
}
.current_page_item.menu-item-368 a {
color: #333333 !important;
font-size: 24px !important;
}
Adding the Same New Style to Multiple Menu Items
Almost finally, you want to make the same changes across multiple items.
First, you want to make the same changes to font size and color to three separate menu items. Once again, find the menu item number as detailed in the first step.
Then, your CSS would look like this:
#menu-item-362 a, #menu-item-368 a, #menu-item-369 a {
color: #FFFFFF !important;
font-size: 20px !important;
}
For each item you want to change, add a comma, followed by the menu item number.
You would do the same for states:
#menu-item-362 a:hover, #menu-item-368 a:hover, #menu-item-369 a:hover {
color: #000000 !important;
font-size: 22px !important;
}
.current_page_item.menu-item-362 a, .current_page_item.menu-item-368 a, .current_page_item.menu-item-369 a {
color: #333333 !important;
font-size: 24px !important;
}
And the same would follow for applying the same changes in background colour to multiple menu items:
#menu-item-362 a, #menu-item-368 a, #menu-item-396 a {
background-color: #000000 !important;
}
#menu-item-362 a:hover, #menu-item-368 a:hover , #menu-item-369 a:hover {
background-color: #FFFFFF !important;
}
.current_page_item.menu-item-362 a, .current_page_item.menu-item-368 a, .current_page_item.menu-item-369 a {
background-color: #F1F1F1 !important;
}
One Final Step
It is always good to make comments in your CSS so that you can easily find an element. If you plan to make changes to the default styling of your menu items, then, before you start writing any CSS it would be a good idea to include something like the following, directly above the custom CSS:
/*********CUSTOMISED MENU ITEMS**********/
I hope you found this tutorial beneficial. If you need clarification on anything, please leave a comment below and we’ll be happy to answer your questions!