Customize the Menu Bar widget

Although the Property inspector enables you to make simple edits to a Menu Bar widget, it does not support customized styling tasks. You can alter the CSS rules for the Menu Bar widget and create a menu bar that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprymenubar_custom.

All CSS rules in the topics below refer to the default rules located in the SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file (depending on your selection). Dreamweaver saves these CSS files in the SpryAssets folder of your site whenever you create a Spry Menu Bar widget. These files also contain useful commented information about various styles that apply to the widget.

Tip Although you can easily edit rules for the Menu Bar widget directly in the accompanying CSS file, you can also use the CSS Styles panel to edit the menu bar’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panel’s Current mode.