Custom Top Navigation for Confluence - Usage

Owned by Walz, Maximilian
Last updated: Feb 11, 2022
4 min read

Englische Version


Basic customization of the top navigation

Adding an additional dropdown menu

  1. Click on the "+ Menu" button
  2. Enter a name (the name is displayed in the topnavigation)
  3. Add content to the menu
  4. Expand the menu
  5. Fill your content into the textfields
  6. Save your adjustments by pressing the button below
  7. Set your default confluence theme to the "custom topnavigation" theme
  8. 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

  1. The navbar has a defauld ID "#edCustomappheader"(IDs start with "#"). Add this id to the CSS.
  2. Add a background color atribute to the CSS. (#000 is the black color code in the example below)
  3. Add a "!important" exclamation to the attribute
  4. Save your CSS

Result:



Advanced customization of the top navigation (Custom Menu)

The documentation below is only working when Custom Menu is selected. Click here for a documentation.


Changing the colors of the menu content

  1. Add the classes to the "Top navigation" CSS. (Each element you add to your custom menu has a class. See the class list below.)
  2. 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.)
  3. 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

ClassType of element
customTopNavigationAMenu Link
customTopNavigationLiContainer of Links (customTopNavigationA)
customTopNavigationUlMenu list header (If you ad a menu to a menu)


Creating custom menus

  1. Create a menu element
  2. Add child menu elements to the main menu element
  3. Add content to the child menu elements
  4. Add CSS (it's recommended to copy the sample CSS from here, we used that CSS in the example below)
  5. Save the changes (CSS and the menus)

Example configuration

Result:




Deutsche Version


Einfache Anpassung der Hauptnavigationsleiste

Hinzufügen eines weiteren dropdown Menüs

  1. Klicken sie auf den "+ Menü" Knopf
  2. Geben sie einen Namen ein (Der Name wird in der Hauptnavigationsleiste angezeigt)
  3. Fügen sie dem Menü Inhalt hinzu.
  4. Erweitern sie die Ansicht des Menüs
  5. Fügen sie ihren Inhalt in die Textfelder ein.
  6. Speichern sie ihre Anpassungen indem sie den darunter liegenden "Speichern" Knopf drücken.
  7. Setzen sie ihr Confluence design auf  das "custom topnavigation" design.
  8. Das neue Menü und dessen Links sind jetzt global sichtbar.


Drücken sie auf die Bilder um diese in voller Größe zu sehen.

Ergebnis:


Ändern der Farbe der Hauptnavigationsleiste

  1. Die Navigationsleiste hat standardmäßig eine ID "#edCustomappheader"(IDs fangen mit "#" an). Fügen sie diese ID zum CSS hinzu.
  2. Fügen sie ein Hintergrundfarbe Attribut hinzu. (#000 ist der Farbcode für die Farbe Schwarz im unteren Beispiel)
  3. Fügen sie einen "!important" Ausruf zum Attribut hinzu.
  4. Speichern Sie Ihr CSS.

Ergebnis:



Erweiterte Anpassung der Navigationsleiste (Custom Menu)

Die folgende Dokumentation funktioniert nur wenn Custom Menu ausgewählt ist. Eine Anleitung dazu finden sie hier.


Ändern der Farben der Elemente im Menü

  1. Fügen Sie die Klassen zum "Top Navigation" CSS hinzu. (Jedes Element hat seine eigene CSS Klasse. Mehr Informationen in der unteren Liste.)
  2. Fügen Sie das Farbattribut hinzu. (Es ist wichtig ein "!important" Ausruf hinzuzufügen, da die Standart Farben von Confluence überschrieben werden müssen.)
  3. Einstellungen speichern mit drücken auf Speichern

Ergebnis:


Es ist wichtig zu wissen das jedes Element im Menü seine eigene zugewiesene CSS Klasse hat. Z.b. gehören alle Links zur Klasse "customTopNavigationA" und alle Untermenüs die Klasse "customTopNavigationUl".

KlasseArt des Elements
customTopNavigationAEinfacher Menü Link
customTopNavigationLiContainer welcher die Links enthält (customTopNavigationA)
customTopNavigationUlUntermenü (Wenn Sie ein Menü in ein Menü einfügen)


Erstellen von eigenen Untermenüs

  1. Erstellen Sie eine Menü Element
  2. Fügen Sie Untermenüs hinzu
  3. Fügen Sie den Untermenüs Inhalt hinzu
  4. Fügen Sie CSS hinzu (Wir empfehlen fürs Erste das Beispiel CSS zu kopieren, welches hier zur Verfügung steht (im unteren Beispiel wird dieses CSS verwendet)
  5. Speichern der Änderungen (CSS und Menüs)

Beispiel Konfiguration:

Ergebnis: