Navigation

Normally the choice to display the desktop or mobile navigation is made by use of media-queries.
On this page - for demo-purposes - both types of navigation are always shown independent from one another and independent of screenwidth.

Main navigation dekstop

The main navigation on desktop is displayed in a bar with a blue background which fills the entire width of the screen.
The navigation items however are placed in a container with the same width as the content.
The active navigation item is indicated with an orange bottom border.

Item
Active Item
Dropdown
- Link
- Another link

Main navigation mobile

On mobile (screenwidth less than 768px) the main navigation bar is replaced with a collapsible navigation, triggered by a 'hamburger' in the top right corner.