How to Change the Style of an Individual Menu Item

Gary Eckstein WordPress 8 , , , , ,

So you want to change the look of only one item on one of your WordPress menus? Luckily this is very simple with CSS.

Many Themes allow for the changing of overall menu styling such as the background color, font style, border width etc. Very few (if any) allow for the styling of individual menu items:

Tutorial: Change the look of a single menu item

Follow these few steps:

  1. Identify the id of the menu-item you want to customize (in Firebug for Firefox alternate click whilst hovering your mouse over the menu item you want to change and select ‘Inspect Element’).
  2. Save the following to the end of your active Theme stylesheet (style.css) but obviously changing the id to your requirements:
    #menu-item-391 a{
     color: #00EE00 !important;
}

Note: add border, font or whatever other CSS elements you want to the code as above. You could also add the CSS above as embedded CSS into the HTML <head> section.