Englische Version
Basic customization of the top navigation
Adding an additional dropdown menu
- Click on the "+ Menu" button
- Enter a name (the name is displayed in the topnavigation)
- Add content to the menu
- Expand the menu
- Fill the content with data
- Save your adjustments by pressing the button below
- Set your default confluence theme to the "custom topnavigation" theme (See XXX for more detailed information)
- The new menu and link are now visible in the global
Click on the images to see them in full size
Result:
Changing the color of the navbar
- The navbar has a defauld ID "#edCustomappheader"(IDs start with "#"). Add this id to the CSS.
- Add a background color atribute to the CSS. (#000 is the black color code in the example below)
- Add a !important exclamation to the attribute
- Save your CSS
Result:
Advanced customization of the top navigation (Custom Menu)
The documentation below is only working when Custom Menu is selected
Changing the colors of the menu content
- Add the classes to the "Top navigation" CSS. (Each element you add to your custom menu has a class. See the class list below.)
- Add a color atribute to the class. (It's important to add an !important to the CSS, because you have to overwrite the default Styling of confluence.)
- Save the changes
Result:
Its important to know that each menu child element has its own CSS class. The classes are listed in the table below
Class | Type of element |
---|---|
customTopNavigationA | Menu Link |
customTopNavigationLi | Container of Links (customTopNavigationA) |
customTopNavigationUl | Menu list header (If you ad a menu to a menu) |
Creating custom menus
- Create a menu element
- Add child menu elements to the main menu element
- Add content to the child menu elements
- Add CSS (it's recommended to copy the sample CSS from ***HERE***, we used that CSS in the example below)
Example configuration
Result:
Deutsche Version
#edCustomappheader .customTopNavigationMenuLi li a{
color: black !important;
}