WordPress customize menu items

Maybe you’ve come across a WordPress theme that you like but your not to fond with the menu items in the navigation bar. Suppose you want to add a border around the menu items or align the menu items to the right rather than the left side. Maybe you want to change background colors or font colors. This post will guide you through some of the ways to customize your menu items.

Depending on the WordPress theme your  using, you may have one location to set a menu or you may have several places for menu’s. Some themes support only one primary menu and others can support primary menu’s and header bar menu’s.

The first thing you want to do for menu customization is to click Appearance > Menus while logged into your WordPress website as admin.

At the top right of the screen you will see Screen Options. Click screen options and click the check box next to CSS Classes.  This gives you the option of adding classes to your menu items.

Now lets say you want to right align your menu items. Under your menu structure click on one of your menu items (home, about, contact, etc.) and you should see a CSS Classes (optional) section. This gives you the option of adding a class to the menu item. With this class you can then add CSS attributes to it.

Lets say we type in ‘menu-align-right’ as the class (without quotes). We use ‘menu-align-right’ as the class for our home, about, and contact menu items.

Now, to add CSS attributes to them we need to open our styles.css file located here: wp-content/themes/yourtheme/style.css

Find the navigation section in your style.css file and enter the following where appropriate:

• li.menu-align-right { float: right; }

Save your style.css file and now your home, about, and contact page should be left aligned.

You can use other CSS properties such as border

• li.menu-align-right { border: 2px solid red; }

Use your imagination…get wild!