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:
To apply a background colour, use the following syntax:
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:
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:
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.
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:
If desired, you could change the background, borders or any other aspect of such items.
Separators are displayed using a HTML
<div> element. An example of the custom separators we've used on our site is shown below:
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.
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