Top Menu Bar

Context

Top menu bar

Figma Component Design

• Desktop: https://www.figma.com/file/ypzBR4RDU1aRGWzebJY08B/FCOS-Hamburg?node-id=1660%3A172649
• Mobile: https://www.figma.com/file/ypzBR4RDU1aRGWzebJY08B/FCOS-Hamburg?node-id=2133%3A143123

Figma Page Preview

• Desktop: https://www.figma.com/file/ypzBR4RDU1aRGWzebJY08B/FCOS-Hamburg?node-id=2073%3A81307
• Mobile: https://www.figma.com/file/ypzBR4RDU1aRGWzebJY08B/FCOS-Hamburg?node-id=2111%3A82498

Responsive behaviour

• Fluid

Scrolling behaviour

• Example: https://fablabbcn.org/ – The top menu bar and tool bar move up out of the viewport when scrolling up and come back down when scrolling down