Your WordPress navigation menu does more than help visitors move around your site. It guides attention, highlights important pages, and quietly tells people what matters most. Most menu items look the same by default, and that is fine for ordinary links. But sometimes you want one item to stand out, such as a Get a Quote button, a Join Now link, or a special offer page. That is exactly what a custom CSS class lets you do.
In this guide, you will learn how to add custom CSS class WordPress menu item styling in a classic theme, how to style that item with a few lines of CSS, and how to do the same job in a block theme. You do not need a plugin, and you do not need to edit theme files. If you can click through the WordPress dashboard and paste a small snippet into Additional CSS, you can follow every step below.
What Is a Custom CSS Class for a Menu Item?
A CSS class is simply a label you attach to an element so you can style it separately. When you add a custom class to a menu item, WordPress adds that label to the HTML for that one link. Your other menu items stay untouched. Then, in Additional CSS, you write a rule that targets only that label, and you change its color, background, padding, or shape.
Think of it like putting a name tag on one person in a group photo. Everyone else still looks the same, but you can now point to that one person and say, give this one a different treatment. The class name itself does nothing on its own. It only becomes powerful when you pair it with a CSS rule that describes how that item should look.
If you are still getting comfortable with the dashboard, our beginner walkthrough of the WordPress dashboard explained for beginners will help you find Appearance, Menus, and the Customizer without guessing. Once you know where those screens live, the steps in this post will feel much easier.
Why Would You Add a Custom CSS Class to a Menu Item?
Most sites have one action they care about more than the rest. It might be a contact form, a pricing page, a booking page, or a shop page. If that link looks identical to every other link, visitors may scroll past it. A custom class lets you turn that single link into a clear call to action while keeping the rest of the menu clean and consistent.
- Highlight a call to action: turn a plain Contact or Get Started link into a colored button that draws the eye.
- Style one item differently: make a Sale or New link bold, underlined, or a different color without changing the whole menu.
- Add an icon or badge effect: use padding and background styling to create a pill shape, a bordered link, or a subtle hover effect.
- Hide an item on certain screens: with a media query, you can hide a less important link on small mobile screens while keeping it on desktop.
- Keep changes safe: because the class lives on one item only, your styling will not accidentally spill over to other links.
How Do You Show the CSS Classes Field in the WordPress Menu Editor?
In classic themes, the CSS Classes field is hidden by default. Many beginners look for it and assume it does not exist, but it is simply tucked away behind a Screen Options panel. Showing it takes less than a minute.
- Go to Appearance, then Menus, in your WordPress dashboard.
- Select the menu you want to edit from the dropdown at the top, then click Select.
- Click Screen Options at the top right of the screen.
- Tick the checkbox labeled CSS Classes.
- Click any menu item to expand it. You should now see a CSS Classes field inside that item.
If your menu is not set up yet, start by creating the basic structure first. Our guide on how to add a dropdown menu in WordPress walks through adding pages, ordering items, and creating submenus.
How Do You Add a Custom CSS Class to a Menu Item?
With the CSS Classes field visible, adding the class itself is straightforward. Choose a short, clear name that describes the purpose of the item, not its color. For example, menu-cta is better than orange-button, because you might change the color later while the purpose stays the same.
- Expand the menu item you want to style by clicking the small arrow on its right side.
- Find the CSS Classes field inside the expanded item.
- Type one class name, such as menu-cta, using only lowercase letters, numbers, and hyphens. Do not use spaces inside a single class name.
- If you want to add more than one class, separate them with a single space, for example menu-cta menu-highlight.
- Click Save Menu at the bottom of the screen.
That is all WordPress needs. At this point, nothing will look different on the front end yet, because you have only added the label. The visual change happens in the next step, when you write the CSS rule that targets this class. Remember to save the menu before you leave the screen, or WordPress will discard the class you just typed.
How Do You Style a Menu Item with Additional CSS?
Additional CSS lives in the Customizer, and it is the safest place for small styling tweaks because it survives theme updates. Go to Appearance, then Customize, then Additional CSS. Paste your rule there, watch the live preview update, and click Publish when you are happy. If you want a deeper introduction to this screen, read our guide on how to add custom CSS in WordPress before you start pasting code.
Here is a simple example that turns your menu-cta item into a rounded button with a colored background and white text:
.menu-cta a {
background-color: #2563eb;
color: #ffffff !important;
padding: 10px 20px;
border-radius: 30px;
}
.menu-cta a:hover {
background-color: #1d4ed8;
}Notice two details in that snippet. First, we target .menu-cta a, not just .menu-cta, because WordPress puts your class on the list item that wraps the link, while the visible text lives inside the link itself. Second, we use !important on the text color only, because theme styles often set link colors strongly, and without it your white text might stay the theme default. Use !important sparingly, and only where a theme rule is clearly winning over yours.
What Are Some Practical Examples You Can Try?
Once you understand the basic button, you can reuse the same idea in several ways. Keep each class name meaningful, and keep your CSS organized with short comments that remind future you what each rule does. Below are three popular variations that beginners use often.
- Outline button: give the link a colored border and transparent background, then fill the background on hover for a clean, modern effect.
- Pill badge for a sale: use a warm background color and bold text for a Sale or Limited Offer item so it reads as urgent without shouting.
- Underlined highlight: keep the background transparent but add a thick bottom border in your brand color, which works well on minimal themes.
.menu-outline a {
border: 2px solid #2563eb;
color: #2563eb !important;
padding: 8px 18px;
border-radius: 30px;
}
.menu-outline a:hover {
background-color: #2563eb;
color: #ffffff !important;
}For a full site hosting and design foundation behind a menu like this, it also helps to understand what good hosting provides. Our web hosting guide explains the basics in plain language, so you can judge speed, support, and value before you invest in a plan for a business site.
How Do You Add a CSS Class in a Block Theme?
Block themes work differently. Instead of Appearance, then Menus, you edit the Navigation block in the Site Editor. The idea is the same, but the location and labels change, so do not worry if the classic steps do not match what you see on screen.
- Go to Appearance, then Editor, and open the template or template part that holds your header.
- Click the Navigation block to select it, then click the individual link you want to style.
- Open the block settings sidebar and look for the Advanced panel.
- Type your class name into the Additional CSS Class(es) field, then save your changes.
- Add your CSS rule in Appearance, then Customize, then Additional CSS, or in the Site Editor styles panel if your theme supports it.
What Should You Do If Your CSS Class Does Not Work?
Almost every failure here comes from one of a few simple causes. Work through this checklist before you assume something is broken, because the fix is usually quick.
- Check that you clicked Save Menu: an unsaved class never reaches the front end, no matter how good your CSS is.
- Clear your cache: browser cache and caching plugins can show an older version of the page. Hard refresh the page or clear the cache and check again.
- Check the selector: remember that WordPress puts the class on the list item, so target the link inside it, such as .menu-cta a.
- Check for typos: the class in the menu editor and the class in your CSS must match exactly, including hyphens and lowercase letters.
- Check theme strength: if the theme rule wins, add !important to that one property only, then retest.
- Check the right menu: if your theme has more than one menu location, make sure you edited the menu assigned to the header location.
If you are editing a header built with a page builder rather than the default menu system, the steps shift again. For Elementor users, our guide on how to edit a header in Elementor free shows where header controls live, and you can combine that knowledge with the class technique here to style builder based headers too.
For official background reading, the WordPress documentation at wordpress.org covers menus, the Customizer, and theme customization in depth. It is a reliable place to confirm behavior when a theme adds its own menu quirks.
Frequently Asked Questions
Do I need a plugin to add a custom CSS class to a menu item?
No, you do not need a plugin in a classic theme. The CSS Classes field is built into WordPress, and Additional CSS is also built in. Plugins can add extra menu features, but for a single highlighted item, the built in tools are enough and keep your site lighter.
Can I add more than one CSS class to the same menu item?
Yes. Type each class name separated by a single space, for example menu-cta menu-highlight. WordPress will add both labels to that item, and you can target either one in your CSS. Keep the list short so your code stays easy to read and maintain.
Why does my menu button style not show up after I save?
The most common reasons are an unsaved menu, cached pages, a typo in the class name, or a selector that targets the wrong element. Check that you saved the menu, clear cache, confirm the spelling matches exactly, and make sure your CSS targets the link inside the list item, such as .menu-cta a.
Will a custom CSS class survive a theme update?
Yes, if you keep your CSS in Additional CSS rather than editing theme files directly. Menu items and their classes are stored in the database, and Additional CSS is also stored safely outside theme files, so a theme update will not wipe out either part of your setup.
Last updated: October 2026.
