Skip to Main Content

How to style WordPress navigation menus individually

Rather than using inspect elements to find the right last item, WordPress has an inbuilt feature that is hidden by default but if you follow this tutorial properly we can use this to add our custom CSS classes and style it easily.

Style WordPress menus individually

Rather than using inspect elements to find the right child item, WordPress has an inbuilt feature that is hidden by default but if you follow this tutorial properly we can use this feature to add our custom CSS classes and style WordPress navigation menus individually.

Appearance – Menus

To access the settings, we have to go to the Appearance tab then click the Menus and choose the right menu.

  1. Go to Appearance and click the Menus
  2. Choose the right Menu
Picture shows how to access theme Menu by going to Appearance then Menus

Screen Options – Show advanced menu properties – CSS classes

Menu items and give a CSS class

To style the navigation items, we have to give CSS classes. Here is the use case if you’re looking for something like a badge in the navigation menu.

The picture shows how to add CSS class to the navigation items

How to Style WordPress Navigation menus

For Elementor Pro’s users

Now we need to add custom CSS to the Nav Menu widget.

  1. Click the Nav Menu widget
  2. Go to Advanced tab – advanced
  3. Go to Custom CSS and start adding your CSS
Last item CSS class with Elementor
Elementor's Promotion
Custom CSS under Navigation (nav) menu

or you can use Elementor’s Custom Code functionalities to inline it.

Elementor's Custom Code
/* .last-item is the nav class i define and .contact-form is the css for nav menu*/
.last-item .contact-form{
    background: #000;
}
/* This CSS is for link color*/
.last-item .contact-form a{
    color:#fff;
}
.el-icon a{
    color: red;
}

/* If you set up color in typography settings, use !important*/
.el-icon a{
    color: red!Important;
}

For Non-Elementor Pro’s users

if you’re not using Elementor pro then you can head over to Customize settings or child theme & add the CSS rule there –

SS is added to the customize section for Elementor free user
/* Style as needed*/
.contact-form{
    background-color: #000;
}
/* This CSS is for link color*/
.contact-form a{
    color:#fff;
}

If You have any questions related to Elementor that come up regularly. Please post your question in the comment section?

I will properly credit you

Thank you

Thangjam Kishorchand

Thangjam Kishorchand

Hi there, this is my place where I write about my Elementor tips and tricks that I learned for the last 2 years. I am mostly active on Quora and Facebook. I love messing around with design trends like Variable Fonts, Dark Mode

Powered by Elementor pro

This site is powered by Elementor pro : Theme builder and it contains Affiliate links,which means that if you buy from my links, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.