Change style of specific links in WordPress Menu with CSS Classes

Do you want to make one link in the WordPress Menu to stand out with a different styling? Like, give button look to the last menu link via custom styling. This is possible with in-built CSS Classes option in WordPress.

1. Enable CSS Classes for Menus

First, we need to activate the CSS Classes option for menus in the WordPress Dashboard.

1. Go to Appearance > Menus in the WordPress Dashboard.
2. Click on ‘Screen Options’ button at the top right.
3. In the expanded box, click to check ‘CSS Classes’ option.

2. Add CSS class to specific menu item

From here on, you can assign custom CSS class to any link in the menu that you have created.

1. Click to expand specific menu item, like ‘Home’ in the screenshot.
2. Add custom CSS class name like menu-button-1 in the ‘CSS Classes’ section, as seen in the screenshot.

3. Add the custom CSS code

Now, add CSS code for the specific CSS Class to customize that very specific menu item. For example, if you want to make that specific menu item bold – then add following CSS code in the style.css file or in the Additional CSS code box in the Customizer.

.menu-button-1 a {
font-weight: bold;
}

You can use the above procedure to highlight specific buttons in the menu. Like for a membership website, use this to make Login Button stand out. On a business website, make the Contact link in the menu look like a button.

Note: This post has been re-written, was originally published on Feb 16, 2012.