Skip to content

USWDS - Bug: Nav submenu padding decreased unexpectedly in transition from USWDS 2 to 3, looks inconsistent with nav menu buttons #5417

@lpsinger

Description

@lpsinger

Describe the bug

USWDS 2 had some padding in nav submenus so that the submenu items were visually aligned with the nav menu button itself (see https://github.com/uswds/uswds/blob/v2.13.3/src/stylesheets/components/_navigation.scss#L374). This padding was removed in USWDS 3, and the nav submenus look off.

Steps to reproduce the bug

  1. Go to any USWDS template that contains a nav submenu --- for example, https://designsystem.digital.gov/templates/documentation-page/.
  2. Open the template page.
  3. Click any dropdown menu.

Expected Behavior

The menu items should be horizontal aligned with the menu button.

Related code

No response

Screenshots

Note the misalignment in this screen shot of the documentation page template:

Screenshot 2023-08-01 at 16 16 25

In my own project (https://gcn.nasa.gov), here is a nav submenu with USWDS 2.13.3:

Screenshot 2023-08-01 at 16 25 21

And with USWDS 3.1.0:

Screenshot 2023-08-01 at 16 25 07

System setup

  • USWDS version: 3.1.0
  • Device: MacBook
  • Operating system: macOS Ventura (13.5)
  • Browser and version: Safari 16.6 (18615.3.12.11.2)

Additional context

No response

Code of Conduct

Metadata

Metadata

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions