Skip to content

Style global nav for small screens

Sarah German requested to merge 8-responsive-nav into main

What does this MR do and why?

Adds styles for the global navigation at mobile/small width.

You should now be able to:

  • Open the menu in an overlay, via the hamburger button, at small width
  • Close the overlay by either clicking outside of it (in the modal area) or using the "collapse sidebar" button at the bottom
  • Overlay should close itself if you resize your browser from small -> wide (992px is our breakpoint)

The existing collapse functionality at wide widths should also still work.

Screenshots, screen recordings, or links to review app

nav3

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Check out this branch and run make setup to update dependencies
  2. Run REMOVE_BEFORE_CLONE=true make clone-docs-projects to refresh content/data
  3. Run make view to run the local preview server
  4. Test the navigation on an interior page. It should be responsive and usable at any screen width

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Closes #8 (closed)

Edited by Sarah German

Merge request reports