Problem Description:

If you want to add unique styles to individual menu links such as colors or icons, this tip is for you. If you just want to change the overall color or style of the nav menu, refer to your theme’s documentation for tips on using the WordPress Customizer, or drop us a line in the forums for help with general Custom CSS.

Answer:

This is considered a modification, so do it at your own risk!  Please note that we cannot assist you with modifying your theme or support problems you encounter as a result!

Under Appearance → Menus, click on Screen Options in the top-right and check CSS Classes under “Show advanced menu properties”. This will allow you to expand each menu item and add a custom class name that can be used to write Custom CSS for applying unique styles to each menu link.

menucssopion

You may now expand the menu items and add a unique CSS class for use in building your Custom CSS. In the below example, the unique class for the Blog link is simply blog_link. It is important not to use generic terms for your class names, ie do not use “home” “blog” etc as these are reserved classes for the page itself. To make your class unique, you can add _link on the end or create a unique class name like mybloglink.

menublogclass

Click Save Menu when finished

Building the CSS

We won’t get into the detail of styling menu items here, as that is up to you, but following is an example of how to implement your custom menu styles.

1. Go to Theme Options and enter the styles into your Theme’s Custom CSS field, or add them to your child theme stylesheet.

2. Format the style like below:

.blog_link{color: #f00 !important; }

For more help on customizing menus, see the WordPress Codex