1 - Changing menu bar styles

The top-level menu bar is always shown and it's design should fit with the overall look and feel of your theme layout...

The top-level menu bar is referenced by the CSS class: div.dynarch-horiz-menu

Background and borders

To apply a background colour, use the following syntax:

div.dynarch-horiz-menu {
 background-color: #ffffd6;
}

If you're using a pre-built menu style that has a graphical background, you'll need to remove the background image in order for your background colour to be seen:

div.dynarch-horiz-menu {
 background-color: #ffffd6;
 background-image: none;
}

For more information on styling backgrounds with CSS, including using background images, please see CSS Background.

To set the border on the menu bar, use the following notation:

div.dynarch-horiz-menu {
 border: 1px dotted #000;
 border-style: dotted none;
}

The example above would display a 1 pixel dotted black border on the top and bottom of the menu bar.

For more information on styling backgrounds with CSS, including using background images, please see CSS Border.

Menu item states

to follow

Menu item text

to follow

Explicit action items

An "explicit action" item is one which when clicked will actually do something, such as going to a specific URL, rather than just showing a pop-up menu.

For example, the "Home" menu on our website is an explicit item - if you click it, it will go to the home page for the current space.

Normally, these items look the same as all the other items on the menu bar. At Adaptavist, we commonly change the cursor for such items to provide some feedback to the end user that the item itself will trigger an action:

/* Add pointer cursor to menus which have explicit actions */
div.dynarch-horiz-menu table tr td.explicit-action {
 cursor:pointer;
}

If desired, you could change the background, borders or any other aspect of such items.

Items with sub-menus

to follow

Menu Separators

Separators are displayed using a HTML <div> element. An example of the custom separators we've used on our site is shown below:

/* Separators on the menu bar */
div.dynarch-horiz-menu table tr td.separator div {
 border-left: 1px solid #ACA899;
 border-right: 1px solid #FFFFFF;
 border-style: none solid;
 height: 100%;
 margin: 2px 3px;
 opacity: 0.7;
 width: 0px;
}

In the example above, we've set the left and right border styles and then used a width of 0 pixels to remove the space between the borders. This gives a subtle 3D effect to the separator.

Panel specific styles

You can apply your styles to menu bars in a specific theme panel by prefixing them with the panel class.

For example, to apply a background colour to any menu bar used in the main content area, prefix with .atb-content:

.atb-content div.dynarch-horiz-menu {
 background-color: #ffffd6;
 background-image: none;
}