Wordpress Theme Reviews

How To Create Menu Item Separators in WordPress Dropdown Menus

Share

Using a little bit of CSS and built-in WordPress advanced menu options we can create menu item separators in drop down menus. At BlueWordpressThemes.com we wanted to create a natural separation between WordPress themes with modest prices and expensive prices. We separated themes that were over $150. You can see this in the “By Price” menu above.

How to Create Menu Item Separators in WordPress Menus

Show Advanced Menu Options to Set Menu Item CSS Class

Within the Menu Manager (Appearance -> Menus) you can assign individual menu items with a custom CSS class. First you need to make the CSS class field available for menu items. To do this, navigate to the upper right corner of the Menu Manager screen and click the “Screen Options” drop down menu. Check the box that says “CSS Classes” to make the field available.

screen-options-advanced-menu

Set CSS Class for Menu Item

Once you have made CSS Classes available you can set the CSS class for individual menu items. In our tutorial we are going to giveĀ  CSS class “menu-separator” to the menu item above the separator. In essence, we will style the bottom of this menu item to create a natural separation between the following menu items.

To do this, navigate to the menu item you wish to use as the separator. In the “CSS Classes (optional)” field, enter the name of the CSS class you wish to apply for this menu item.

set-css-class-menu-item-options

Define CSS Class in Stylesheet

The final step is to define the CSS class in your stylesheet. You do this by adding the following style to style.css in your theme files:

Once you have created this CSS class, any menu item you apply it to will automatically display the style. This is a very basic application that will display an image of a small horizontal line below the menu item. With CSS there is no limit to how you could style your separators. All done!

Share

Leave a Comment