Do you want to add custom styling to the first and last items of your WordPress menu?
You could simply add a custom CSS class to the first and last menu items. However, if you rearrange the menu at any point then those items may no longer be first and last.
In this article, we’ll show you how to add a .first and .last class that will style the first and last items even if you reorder the menu at a later date.
Why Style the First and Last Navigation Items Differently?
In a past custom design project, we needed to add some custom styling to the navigation menu items of a WordPress website. In particular, this design required different styling for the first and last menu items.
One option was to simply add a custom CSS class to the first and last menu items. However, if the client changed the menu’s order, then this might break the custom styling.
For this reason, we decided to do use filters instead.
In this guide, we’ll show you how to style the first and last items of your navigation menu, in a way that works even if the menu gets rearranged. Simply use the quick links below to jump straight to the method you want to use.
Method 1: Adding First and Last Class Using a Filter
The first way to style your navigation menu items is to add a filter to your theme. This requires you to edit your theme’s functions.php file, so it isn’t recommended for beginners.
Changing your theme’s code can cause common WordPress errors, or even break your site completely. With that in mind, you may want to backup your WordPress website before continuing with this method.
If you haven’t changed your site’s code before, then see our guide on how to copy and paste code in WordPress.
To style the first and last menu items, simply open your theme’s functions.php file and then paste the following code snippet:
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');
This creates .first and .last CSS classes for your first and last menu items. You can now use these classes to apply unique styling to these items.
To learn how to do this in detail, see our guide on how to style navigation menus.
For this guide, we’ll simply bold the first and last menu items, by adding the following CSS formatting to our theme’s style.css stylesheet:
.first a {font-weight: bold;}
.last a {font-weight: bold;}
In the following image, you can see the same menu before and after we added the code.
Method 2: Styling First and Last Items Using CSS Selectors
Another option is to style the first and last menu items differently using CSS selectors. This method is simpler, but it may not work with some older browsers such as Internet Explorer.
With that in mind, it’s a good idea to test your WordPress website in different browsers.
To follow this method you’ll need to add code to your theme’s style sheet or the ‘Additional CSS’ section of the WordPress Theme Customizer.
If you haven’t done this before, then see our guide on how to easily add custom CSS to your WordPress site.
You should start by editing your theme’s style.css file, or by navigating to Appearance » Customize and clicking on ‘Additional CSS’.
After that, you need to paste the following code snippet and then save your changes.
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
Note that you will need to replace ‘yourmenuid’ with your navigation menu’s ID.
The selectors ‘first-child’ and ‘last-child’ select the first and last child of its parent, which are the first and last items in the navigation menu.
For example, we used this code to bold the first and last navigation menu items on our site:
ul#primary-menu-list > li:first-child a {
font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
font-weight: bold;
}
We hope this tutorial helped you learn how to add the .first and .last class to WordPress navigation menus. You can also go through our guide on how to create a landing page with WordPress, or check out our list of the best drag and drop page builders.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Ahmed Mahdi says
i’ve changed the code slightly to work with child menus too:
function wpb_first_and_last_menu_class($items) {
foreach($items as $k => $v){
$parent[$v->menu_item_parent][] = $v;
}
foreach($parent as $k => $v){
$v[0]->classes[] = ‘first’;
$v[count($v)-1]->classes[] = ‘last’;
}
return $items;
}
add_filter(‘wp_nav_menu_objects’, ‘wpb_first_and_last_menu_class’);
Trevor Simonton says
exactly what i needed. thank you!
Georgios Panagiotakopoulos says
Thanks! This works great!
Munkhbayar says
Thanks for code. Works for me.
mad_doc says
Thank you for idea & help!
Charles says
Thanks for this nice code…
What about child menu first and last item?
It applied only for parent manu.
Do you have any idea about child last item?
jordi says
Anyone have any tip about use add_filter(”); for wp_nav_menu using STARKERS?
JS and CSS are fine to do that, it is just frustrating to don’t be able to fix it from the back…
can’t make it works
thanks to share anyway!!
Jake says
This does not work reliably if you have nested menus.
Editorial Staff says
Hmm, will look into a fix for this.
Admin
Olivier says
It works when the menu item is the last, or the last child of a last menu item.
It does not work when the menu item is a last child of a menu item that is not the last.
Olivier says
Together with some other additions to functions.php that i’ve tried, this code fails to tag a menu item as first or last menu item when they are in a submenu. A fix for this would be great!
Elliott Richmond says
Nice! Would usually use CSS but this is a good tip
Mattia says
Great! This is particularly interesting because I have to class more than 2 menu items…
Now I got it!
Thanks
karen says
Thanks for this! Forgive me if I missed it – but – is there an example of the menu to see the difference in the nav created by this class? Thank you again!
Editorial Staff says
The site we designed for our client is not live yet. But the main reason was that we wanted to have a border left to the first menu item. All other items had border right element with a specific padding and margin. We used the last class to remove the margin right and the border right because there was no need for it. It was hitting the wrap container. Hope you can visualize it.
Admin
Ivo Minchev says
I’ve tried this at the site http://aurorachalet-switzerland.com/ and I cannot see the effect. I’m using the “Twenty Eleven” theme for this site. Where is the problem?
Ivo Minchev says
Pobably because of the #yourmenuid tag. I tried some ID’s but none of them worked.
Editorial Staff says
This should work as long as you specify the correct id tags.
Admin
Editorial Staff says
Don’t think that you are using the wp_nav_menu. From the looks of it, it seems that your site is using the fall_back menu by listing all pages. Can you confirm that you have gone into Appearance > Menu and created a menu there. Then specified that menu as a primary location??
Admin