Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove nav container from header component example #430

Merged
merged 2 commits into from
Mar 19, 2024

Conversation

aduth
Copy link
Member

@aduth aduth commented Mar 19, 2024

🛠 Summary of changes

Improves header component markup example to avoid <div class="usa-nav-container">. It also updates the logo link to always point to the root regardless of {{ site.baseurl }} value (previously it would often link to the same page).

Why?

  • This markup was originally sourced from identity-site, but the default USWDS component guidance for extended header does not include it
  • The usa-nav-container creates additional horizontal padding that causes it to be misaligned with page content that includes navigation

📜 Testing Plan

Easiest to review with whitespace changes hidden, since the changes amount to removing a single wrapper element <div class="usa-nav-container">.

  1. npm start
  2. Visit http://localhost:4000/banner/
  3. Observe reduced horizontal padding on header

👀 Screenshots

Before After
image image

@aduth
Copy link
Member Author

aduth commented Mar 19, 2024

Visual regression failure is catching the expected diff on the header appearance:

image

@aduth aduth merged commit 45a5eab into main Mar 19, 2024
3 of 4 checks passed
@aduth aduth deleted the aduth-header-rm-nav-container branch March 19, 2024 19:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants