Have you noticed websites featuring uniquely styled first and last menu items? This is not a coincidence – it’s the result of smart CSS implementation. This technique can emphasize important links, such as your contact page or a special promotion.
Many of our readers have attempted to add custom classes to their menu items, only to discover that rearranging the menu disrupts the styling. The items designated as ‘first’ and ‘last’ may no longer occupy those positions, resulting in an inconsistent menu appearance.
That’s why this guide will demonstrate how to add .first and .last classes that remain attached to your menu items, even if you rearrange them later. We will explore two methods: a filter for classic themes and CSS selectors applicable to all themes, including block themes.
Why Should You Style the First and Last Navigation Items Differently?
Occasionally, you may want to apply custom styling to the first and last items in a navigation menu. This can help important links stand out, such as the link to your site’s contact form or WooCommerce cart page.
In this situation, you could simply assign a custom CSS class to the first and last menu items. However, if you alter the order of the menu at any time, this could completely disrupt the custom styling.
For this reason, we recommend utilizing filters instead.
This guide will demonstrate how to apply styles to the first and last items in your navigation menu, allowing you to rearrange the menu without losing your custom styles. Use the quick links below to navigate directly to your preferred method:
- Method 1: Adding First and Last Classes Using a Filter (Recommended)
- Method 2: Styling First and Last Menu Items Using CSS Selectors (Compatible with All Themes)
Pro Tip:Want to emphasize a specific menu item on your website? Check out our guide on highlighting menu items in WordPress for more details.
Method 1: Adding First and Last Classes Using a Filter (Recommended)
Note:This method is applicable only to classic WordPress themes. If you’re using a block theme, please refer to Method 2.
The simplest way to style your navigation menu items is by adding a filter to your theme.
You will often find code snippets in WordPress tutorials that instruct you to add them to your theme’s functions.php file.
The main issue is that even a small error in the custom code snippet can disrupt your WordPress site and render it inaccessible. Additionally, if you update your WordPress theme, you will lose all your customizations.
That’s where WPCode comes into play.
This free plugin allows you to easily add custom CSS, PHP, HTML, and more to your WordPress site without compromising its security.
First, install and activate the free WPCode plugin. For detailed instructions, refer to our step-by-step guide on installing a WordPress plugin.
Once activated, navigate toCode Snippets » Add Snippet.
Here, hover your mouse over ‘Add Your Custom Code.’
When the option appears, click on ‘Use snippet.’
Start by entering a title for your custom code snippet. Choose a name that helps you recognize the snippet in the WordPress dashboard.
Next, open the ‘Code Type’ dropdown and select ‘PHP Snippet.’
You can then insert the following PHP code into the code box:
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');
After that, scroll to the top of the screen and click the ‘Inactive’ toggle to change it to ‘Active.’
Finally, click on ‘Save Snippet’ to activate the PHP snippet.
This will add .first and .last CSS classes to your first and last menu items, allowing you to apply distinct styles to these elements in your custom navigation menu.
Next, you’ll need to add an additional code snippet to your WordPress site. Begin by creating a new custom code snippet using the same method outlined earlier.
After that, enter a title for your custom code snippet.
Then, open the ‘Code Type’ dropdown menu and select ‘CSS Snippet’ this time.
In this guide, we will make the first and last menu items bold by inserting the following CSS code into the code box:
.first a {font-weight: bold;}
.last a {font-weight: bold;}
Once that is complete, click the ‘Inactive’ toggle to switch it to ‘Active.’
Finally, click on ‘Save Snippet’ to activate the CSS snippet.
Now, when you visit your website, you will see the updated menu styling in action.
Method 2: Styling First and Last Items Using CSS Selectors (Compatible with All Themes)
If you prefer not to use a code snippet plugin, you can apply styles to the first and last menu items using CSS selectors. Keep in mind that this approach may not be compatible with some older browsers, including Internet Explorer.
Therefore, it’s advisable to test your WordPress website across various browsers.
To implement this method, you’ll need to add code to your theme’s style sheet or the ‘Additional CSS’ section in the WordPress Theme Customizer.
If you’re unfamiliar with this process, refer to our guide on how to easily add custom CSS to your WordPress site.
The first step involves editing your theme’s style.css file or navigating to Appearance » Customize and then selecting ‘Additional CSS’.
Next, add the following code snippet to your site:
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
Remember to replace ‘yourmenuid’ with the ID of your navigation menu.
The selectors ‘first-child’ and ‘last-child’ target the first and last items of their parent, which correspond to the first and last items in the navigation menu.
For instance, we applied this code to make the first and last items in our WordPress navigation menu bold:
ul#primary-menu-list > li:first-child a { font-weight: bold;
}
ul#primary-menu-list > li:last-child a { font-weight: bold;
}
If you’re using a WordPress block theme, the Theme Customizer will not be available in your WordPress admin. To access the Theme Customizer, enter the following URL in your browser:
https://yourdomainname.com/wp-admin/customize.php
Remember to replace ‘yourdomainname.com’ with your actual website’s domain name.
Next, go to the ‘Additional CSS’ section as you did before and add the following code. Note that this code is slightly different because you won’t need to specify your menu ID.
li:first-child a,
li:last-child a { background-color: black; border: none; color: white !important; /* Ensures the color white takes precedence */ padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 12px;
}
Feel free to modify the code to suit your preferences. In the example below, we transformed the first and last links into buttons.
Here’s how it appears:
We hope this tutorial has helped you understand how to add the .first and .last classes to your WordPress navigation menus. You might also be interested in our article on creating a vertical navigation menu in WordPress, as well as our beginner’s guide to building a dropdown menu on a WordPress site.
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
