USWDS - Header: fix mobile menu shaded display #4817
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Remove `_header.twig` settings so we can override individual templates.
Restoring to what this was previously, since escape filter now works
Remove z-index from `usa-header`. Its stacking context was **lower** than the modal. This is causing issues where the main nav, which is a child, disappears when using flex or grid on `<body>`.
amyleadem
requested changes
Jun 16, 2022
There was a problem hiding this comment.
Looks good! Thanks for the helpful writeup.
One small thing: I found a couple uses of square brackets for placeholders in the sign in template. Everything else looks solid.
Here are the items I tested:
- Navigation is present
- Placeholder elements are displayed consistently with angle brackets
Display types on #root:
- Mobile navigation looks good with flex
- Mobile navigation looks good with grid
- Mobile navigation looks good with block
Header variants:
- Default
- Megamenu
- Extended Megamenu
- Extended
Browsers:
- Safari
- Firefox
- Chrome
|
@amyleadem thanks for the feedback! I've updated |
thisisdano
approved these changes
Jul 18, 2022
Totally, that was my mistake. Will separate them out next time. |
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fix mobile menu appearance for different CSS layouts. The menu now appears properly on layouts using flex or CSS grid. Closes #4409.
Additional information
Removed z-index from
usa-headerin 9c0653c. There's nopositionspecified, so it doesn't make sense to have it by default. Removing this fixes the display issue because the value was lower than the nav overlay'sz-index.Other changes
How to test
style="display: flex; flex-direction: column;todiv#rootAlso, didn't notice any side effects on the other nav variations but worth double-checking.
Browsers tested
Before you hit Submit, make sure you’ve done whichever of these applies to you:
npm testand make sure the tests for the files you have changed have passed.