Create Custom CSS Styling for Menu Items Joomla 1.7

There are a many new features in Joomla 1.7 that are easy to overlook. For example, you can now assign a custom CSS class to any menu link. Why is this important? There are times when you want to create unique css styling for a specific menu link. In previous versions of Joomla, there was no way to assign a custom CSS class to an individual menu link. Now, with 1.7, you can.

To assign a custom CSS class to a Joomla menu link

  1. From the Joomla Admin menu, select Menus > Main Menu (or whatever menu you want to edit).
  2. Click the menu link to which you want to assign a custom CSS class.
  3. From the menu options on the right side of the page, click Link Type Options.Joomla Menu Item Custom Class Configuration
  4. In the Link CSS Stylefield, enter a CSS class nameIMPORTANT: Use only alpha numerical characters, hyphens, and underscores, but no spaces.
  5. Click Save & Closeto save your changes.Joomla adds the custom class to the menu link.Custom CSS Class in Joomla Menu Link
  6. Now you can use a CSS class to create custom formatting for the link you modified. For example, create a CSS class in your css stylesheet; make sure to use the exact same class name you used in the link:a.homestyle {color:#fff;font-size:11px;background:#666}