Skip to content

fix: Header nav and sub nav design alterations for sake of mobile

stephen requested to merge mobile-nav-adjustments into main

Previously, the way the nav broke down from desktop to mobile was a "best guess" at desired behavior. This MR incorporates design feedback to improve the design and readibility of donate-neo at mobile widths:

  • Below the point at which elements run into one another (around 768px), the positioning of the main nav elements are rearranged to more cleanly fit onto two lines: The main "links" drop to a second line below the logo and buttons.
  • There is a minor band of screen widths between this (769px) and "desktop" (900px) where the two-line design looked awkward (as there was clearly room for everything to fit onto one line) but maintaining the standard layout, with the long links list at center, would cause the buttons to become overlapped by the links. For this small and uncommonly-used band of device widths, we reposition the main nav elements slightly against one another.
  • The subnav no longer breaks down into a stack of three full-width items as early; it will now display on one line until it hits 480px or below, at which point it does adopt the three-up style.

Closes #60 (closed).

Edited by stephen

Merge request reports