WordPress add class to menu item

New Page Close-up HTML

Add CSS Classes to Menu Items in WordPress

Updated on November 17, 2020

20 comments

Avatar for John Locke

John Locke

John Locke is an SEO consultant from Sacramento, CA. He helps manufacturing companies rank higher through his web agency, Lockedown SEO.

Website Facebook Twitter LinkedIn Instagram Youtube

Occasionally, you may come across a situation where you want to add a CSS class to a specific link in your WordPress navigation menu.

Suppose you want to make a link in your navigation stand out from the rest and turn it into a call-to-action button.

You can do this by adding a CSS class to the lielement element that contains this link and giving it custom styles.

But how to add a CSS class only to this link?

One thing a lot of people don’t know is that WordPress hides a lot of functionality in the Screen Options tab at the top of every screen in the admin area (back-end).

To add CSS classes to a WordPress menu, first go to Appearance > Menus in your WordPress theme.

Next, find the Screen Options tab at the top right of the screen. Click to open the panel and check the box labeled CSS Classes.

Screenshot of the Screen Options panel opened in the Menus screen of a WordPress admin area

Select the menu you want to edit, then click the link you want to add a CSS class to. You should see a field that was not previously visible called CSS Classes (optional).

Screenshot of a WordPress menu being edited, with a specific links panel open

Add the CSS class to your link and save the menu.

In the screenshot above, we’ve added the class home link to the link to our home page. This is what our menu will look like now.

<ul> <li class=”home-link”><a href=”http://yourwebsite.com/”>Home</a></li> <li><a href=”http://yourwebsite .com/about/”>About</a></li> </ul>

You can then add the appropriate CSS rules to your stylesheet.

Congratulations, you have just added custom styles to a specific link in your WordPress menu!

Tags: CSS, WordPress Development, WordPress Theme Development Originally Published: January 14, 2016

Join the comments

Avatar for John Locke

John Locke

John Locke is an SEO consultant from Sacramento, CA. He helps manufacturing companies rank higher through his web agency, Lockedown SEO.

Close-up HTML

Add CSS Classes to Menu Items in WordPress

Updated on November 17, 2020

20 comments

Avatar for John Locke

John Locke

John Locke is an SEO consultant from Sacramento, CA. He helps manufacturing companies rank higher through his web agency, Lockedown SEO.

Website Facebook Twitter LinkedIn Instagram YouTube

Every once in a while, you might run into a situation where you want to add a CSS class to a specific link in your WordPress navigation menu.

Let’s say you want to make one link in your navigation stand out from the rest, and make it a call to action button.

You could do this by adding a CSS class to the li element enclosing that link, and giving it custom styles.

But how would you add a CSS class to just that link?

One thing many people don’t know is WordPress hides a lot of features under the Screen Options tab at the top of each screen in the back-end (admin) area.

To add CSS classes to a WordPress menu, first go to Appearance > Menus in your WordPress theme.

Next, find the Screen Options tab at the top right of the screen. Click to open the panel, and check the box labelled CSS Classes.

Screenshot of the Screen Options panel opened in the Menus screen of a WordPress admin area

Sélectionnez le menu que vous souhaitez modifier, puis cliquez sur le lien auquel vous souhaitez ajouter une classe CSS. Vous devriez voir un champ qui n’était pas visible auparavant appelé Classes CSS (facultatif).

Screenshot of a WordPress menu being edited, with a specific links panel open

Ajoutez la classe CSS à votre lien et enregistrez le menu.

In the screenshot above, we’ve added the class home link to the link to our home page. This is what our menu will look like now.

<ul> <li class=”home-link”><a href=”http://yourwebsite.com/”>Home</a></li> <li><a href=”http://yourwebsite .com/about/”>About</a></li> </ul>

You can then add the appropriate CSS rules to your stylesheet.

Congratulations, you have just added custom styles to a specific link in your WordPress menu!

Tags: CSS, WordPress Development, WordPress Theme Development Originally Published: January 14, 2016

Join the comments

Avatar for John Locke

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

How to Add a Custom Class to a WordPress Menu Item

Get acquainted with this very useful core WordPress feature that many users aren’t aware of, since it’s hidden by default.

Chris / April 20, 2012

coded

This is a question I get a lot related to UberMenu – WordPress Mega Menu Plugin, though it’s actually baked into WordPress Core. It’s a very powerful feature, as it allows you to target either a single menu item or a group of menu items with a single class. However, the option is hidden from the UI by default. In order to add a class to a menu item, you first have to reveal it.

1. In Appearance > Menus, click the Screen Options tab

WordPress menu screen options button

2. En Mostrar propiedades del menú avanzado , marque Clases CSS

WordPress Screen Options - CSS Classes Option

3. Now expand any menu item to show the CSS Classes text entry (optional).

WordPress Menu Item CSS Classes

4. Enter your class name and save your menu to apply the class to the menu item

The class will be added to the LI element (list item), the same element to which the menu item ID is attached. You can then style your element like this, where .menu is replaced with the class used for your menu:

01

02

03

04

05

06

07

08

09

ten

Eleven

12

13

14

fifteen

sixteen

17

/* Target LI menu item */

.menu li.my-class{

   /* Margin can go here */

}

/* Target the Anchor menu item (link) */

.menu li.my-class > a{

   /* Colors, font sizes, would normally go here */

}

 

/* Target LI menu item in UberMenu */

.ubermenu .ubermenu-item.my-class{

 

}

/* Target the Anchor (link) or span (disabled link) menu item in UberMenu */

.ubermenu .ubermenu-item.my-class > .ubermenu-target{

   /* Colors, font sizes, would go here */

}

Keep in mind that you may need to increase the specificity of your selector (or, in rare cases, use the !important flag) to ensure that your new styles are applied.

5. Enjoy even more control over customizing your menu!

Please note that this is a standard WordPress feature and works with or without UberMenu. If you need more control in UberMenu, UberMenu offers the ability to add classes and anchor IDs to your menu items.

This entry was posted in How To, WordPress, WordPress Tutorials. Add the permalink to your favorites.


Video WordPress add class to menu item

Related Posts

Free chat room code for my website

Contents1 How to set up a free chat room on the website.2 3 comentarios2.1 Trackbacks/Pingbacks2.2 Submit a Comment Cancel reply3 How to Create a Chat Room Website…

Background image full screen css

Contents1 Cómo – Full Page Image1.1 Example1.2 Example2 CSS background image tamaño tutorial: how to codify a complete page background image3 Perfect Full Page Background Image3.1 Méthode CSS géniale,…

WordPress leverage browser caching

Contents1 Aproveche el almacenamiento in hidden del navegador1.1 Will it works for my website?1.2 Where are plugin options1.3 Some JavaScript files still display under Leverage Browser Caching1.4…

WordPress post to facebook page

Contents1 How to Automatically Post to Facebook from WordPress1.1 Download Now: How to Launch a WordPress Website [Free Guide + Checklist]1.2 1. Create an IFTTT account.1.3 2….

Download images from wordpress media library

Contents1 How to export your WordPress media library1.1 Download maintenant : How to launch a WordPress website [Free Guide + Checklist]1.2 How to export your WordPress media…

WordPress single post template

Contents1 How to Create Custom Unique Post Templates in WordPress2 Post Template Files2.1 author.php2.2 Fecha.php3 Handbook navigation4 How to Create Custom Single Post Templates in WordPress5 Video…