Customize the Menu Bar widget

The SpryMenuBarHorizontal.css and SpryMenuBarVertical.css files provide the default styling for the Menu Bar widget. You can, however, customize the widget by changing the appropriate CSS rule. The CSS rules in the SpryMenuBarHorizontal.css and SpryMenuBarVertical.css files use the same class names as the related elements in the menu bar’s HTML code, so it’s easy for you to know which CSS rules correspond to the different sections of the Menu Bar widget. Additionally, the SpryMenuBarHorizontal.css and SpryMenuBarVertical.css files contain class names for widget behaviors (for example, hovering and clicking behaviors).

The horizontal or vertical styling sheet for the widget should already be a included in your website before you start customizing. For more information, see Prepare your files.

Style a Menu Bar widget (general instructions)

You can style an Menu Bar widget by setting properties for the entire Menu Bar widget container, or by setting properties for the components of the widget individually.

Open the SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file.
Locate the CSS rule for the part of the menu bar to change. For example, to change the background color of the top-level menu items, edit the ul.MenuBarHorizontal a or ul.MenuBarVertical a rule in the SpryMenuBarVertical.css or SpryMenuBarHorizontal.css file.
Make your changes to the CSS and save the file.

You can replace style-related class names in the CSS files and HTML code with class names of your own. Doing so does not affect the functionality of the widget.

The SpryMenuBarHorizontal.css and SpryMenuBarVertical.css files have extensive comments, explaining the code and the purpose for certain rules. For further information, see the comments in the file.

Change text styling of a menu item

The CSS code attached to the a tag contains the information for text styling. Several relevant text-styling class values that pertain to different menu states are attached to the a tag.

To change the text styling of a menu item, use the following table to locate the appropriate CSS rule, and then change the default value.

Style to change	CSS rule for vertical or horizontal menu bar	Relevant properties and default values
Default text	ul.MenuBarVertical a, ul.MenuBarHorizontal a	color: #333; text-decoration: none;
Text color when mouse pointer moves over it	ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover	color: #FFF;
Text color when in focus	ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus	color: #FFF;
Menu Bar item color when mouse pointer moves over it	ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover	color: #FFF;
Submenu item color when mouse pointer moves over it	ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover	color: #FFF;

Change the background color of a menu item

The CSS rule attached to the a tag contains the information for a menu item’s background color. Several relevant background color class values are attached to the a tag that pertain to different menu states.

To change the background color of a menu item, use the following table to locate the appropriate CSS rule, and then change the default value.

Color to change	CSS rule for vertical or horizontal menu bar	Relevant properties and default values
Default background	ul.MenuBarVertical a, ul.MenuBarHorizontal a	background-color: #EEE;
Background color when mouse pointer moves over it	ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover	background-color: #33C;
Background color when in focus	ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus	background-color: #33C;
Menu Bar item color when mouse pointer moves over it	ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover	background-color: #33C;
Submenu item color when mouse pointer moves over it	ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover	background-color: #33C;

Change the dimension of menu items

To change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.

Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
Change the width property to a desired width, or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule.
Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
Change the width property to a desired width (or change the property to auto to remove a fixed width).
Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule.
Add the following properties to the rule: float: none; and background-color: transparent;.
Delete the width: 8.2em; property and value.

Position submenus

The position of Spry Menu Bar submenus is controlled by the margin property on submenu ul tags.

Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
Change the margin: -5% 0 0 95%; default values to the desired values.

Center a Menu Bar widget

By default, the Menu Bar widget, as well as its menu and submenu items, are all aligned left on the page. You can center the Menu Bar widget itself by adding some code to the page on which the Menu Bar widget appears.

The example demonstrates centering a horizontal Menu Bar widget, but you can center a vertical Menu Bar widget within its container if you are using one.

Note: If you want to center Menu Bar widgets on more than one page, you might want to integrate your changes into the CSS style sheet. Keep in mind, however, that all pages linked to that style sheet will reflect your changes.

Add a style block to your page after the link to the Menu Bar widget’s CSS style sheet.
```
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
```
The rule you add to this style block will override some of the default rules in the style sheet.

Specify a new ul.MenuBarHorizontal rule in the style tag, specify a width, and add the margin:auto property and value, as follows:

<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Give the menu bar a width and set the margins to "auto"
 * so that the browser does the centering.
 */
ul.MenuBarHorizontal {
	width: 32.2em;
	margin: auto;
}
-->
</style>

For a working example, see the Menu Bar widget centering page on Adobe Labs.

Center menu items

By default, the Menu Bar widget, as well as its menu and submenu items, are all aligned left on the page. You can center the menu items inside the menu bar by adding some code to the page on which the Menu Bar widget appears. This task does not center the submenu items.

The example demonstrates centering a horizontal menu bar’s menu items, but you can also apply this to a vertical Menu Bar widget if you are using one.

Note: If you want to change the styling of Menu Bar widgets on more than one page, you might want to integrate your changes into the CSS style sheet. Keep in mind, however, that all pages linked to that style sheet will reflect your changes.

Add a style block to your page after the link to the Menu Bar widget’s CSS style sheet.
```
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
```
The rule you add to this style block will override some of the default rules in the style sheet.

Specify new ul.MenuBarHorizontal a and ul.MenuBarHorizontal ul a rules, and add properties to align the text, as follows:

<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Center the text within all menu item links.
 */
ul.MenuBarHorizontal a {
	text-align: center;
}
/* Set the the alignment back to left for any
 * menu item links that are in a sub menu.
 */
ul.MenuBarHorizontal ul a {
	text-align: left;
}
-->
</style>

For a working example, see the Menu Bar widget centering page on Adobe Labs.

Center all menu items

By default, the horizontal Menu Bar widget, as well as its menu and submenu items, are all aligned left on the page. You can center all of the menu items inside the menu bar by adding some code to the page on which the Menu Bar widget appears. This task centers all menu items and submenu items.

The example demonstrates centering all menu items in a horizontal menu bar, but you can also center all items in a vertical Menu Bar widget if you are using one

Add a style block to your page after the link to the Menu Bar widget’s CSS style sheet.
```
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
```
The rule you add to this style block will override some of the default rules in the style sheet.

Specify a new ul.MenuBarHorizontal a rule that centers all links, as follows:

<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Center the text within all menu item links. This
 * causes the text in menu items for both the menu bar and
 * sub menus to center.
 */
ul.MenuBarHorizontal a {
	text-align: center;
}
-->
</style>

For a working example, see the Menu Bar widget centering page on Adobe Labs.