WordPress - Customizing Menu Items with CSS Class Option

In this article, we will explain how we can customize the appearance of a menu item using the custom CSS code.

Please follow these steps:

1. First, we should add a custom class to the menu item. Please go to "WordPress dashboard >> appearance >> menus"

2. Then click on “Screen Options” in the top right corner of the browser. Now select “CSS Classes” option and this option will be available for each menu item

3. Next, click on your desired menu item and you will see that CSS classes are added to options there. Add a class to the menu item and save your modifications. 

4. Now that menu item has an extra CSS class and you can use that class for customization.

So you can add the css codes which you want into the site setting >> general >> custom css

Here are some examples of customization.let's assume that the custom class name is "customize-me".

Hiding that menu item:

1. .customize-me{display:none;}

Changing font size and color for that menu item:

1. .customize-me a {
2. font-size:20px !important;
3. color: red !important;
4. }

• Related Articles

• WordPress - Make menu items links open in new tab

    In this article, we will explain how we can open menu items link in a new tab. 1. Login to the WordPress dashboard. 2. From the left-hand sidebar of the Dashboard, navigate to Appearance >> Menus 3. Click on “Screen Options” in the top right corner ...

• Massive Dynamic - Mega menu guide

  This is a step by step guide for creating a mega menu. You can see the example of the mega menu from the : http://theme.pixflow.net/massive-dynamic/general/ 1. Login to the Wordpress dashboard. 2. From the left-hand sidebar of the Dashboard, navigate ...

• Massive Dynamic - Create a header menu button option

  This is a step by step guide for creating a header menu button option. You can see the example of the menu button from the : http://theme.pixflow.net/massive-dynamic/startup2/ Button menu items are only available in the top classic header with style ...

• Massive Dynamic - URL+ option

  By using this option you can add an ID to a row for creating the one-page menu or setting link of the row for the button, text, and so on. So you can access the specific row from anywhere on your website. For activating this option, follow the below ...

• Massive Dynamic - Set the gather menu

  In this article, we'll explain how to set the gather menu and change the style of it. You can see the example of the gather menu here   Set the gather menu 1. Open the website in site setting mode 2. Navigate to the header >> header layout 3. Choose ...