Header

Desktop

The header in desktop applications contains the logo, the main navigation, and the meta navigation with the search function. It occupies the entire content width of 12 grid columns, with the logo’s word mark area left-justified to the first grid column.

Mobile

The header in mobile applications contains the logo as well as the search and main menu icons. The search function opens below the header and can be hidden with the close icon. Alternatively, you can also place the search function in the main menu rather than in the header.