Navigation

Desktop

In the Hover state, the corresponding main menu item is initially displayed in Active Red.

Hover main menu

Then a line in Active Red will appear below the menu item from the left and the flyout menu will open from the top. The flyout menu is separated from the background color of the content area at the side and bottom by a line in #F7F7F7 with a width of 1 px.

The submenu items also change to Active Red on hover.

Open flyout menu with highlight on main menu

Hover on open flyout menu

1-px-line in #F7F7F7 to separate navigation flyout from white background

Mobile

The main navigation of the mobile header opens by simply tapping on the menu icon. If the users taps on a menu item in the first content level, the corresponding second content level opens. A link leads back to the higher level. If the search function is not displayed as an icon in the mobile header, it is displayed at the bottom of the menu.

From left to right: menu icon, 1st level menu, 2nd level menu, 3rd level menu