<< back to knowledgebase home

Using CSS to control menu text (MM2)

Article ID: 000158

Category: Menu Editing Issues

Issue

You can edit a Cascading Style Sheet (CSS) to control the text in your menu.

This will affect the whole menu in all states (normal, over and click). It is not possible to change individual menu items or rollover states using CSS.

Solution

For example, you may want to change the line-height of the text in all the menu items in a menu.

If you have more than one menu in your site, you will need to create a CSS rule for each menu that you want to use the modified line-height in.

You don't have to create a new rule for each instance of a menu object on a page, just for each menu you have defined in your site.

So if your site has three menus…

Main Menu
Sidebar Menu
Products Menu

…you will need to find the names of the menu folders within the menumachine folder. The names will be lowercase and spaces will have been converted to underscores.

e.g. for the menus above, the menu names would be
main_menu
sidebar_menu
products_menu

You would then edit your CSS like this:

div#main_menu {line-height:14px;}
div#sidebar_menu {line-height:14px;}
div#products_menu {line-height:14px;}

Or, in more compact form:

div#main_menu, div#sidebar_menu, div#products_menu {line-height:14px;}

Last updated: August 8, 2007

This article has been viewed 7196 times.

Related articles