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.

Sign up for GitHub

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

Jump to bottom

Mobile nav menu is overlapped by higher z-indexed visual elements when open #115

Closed
DarrickFauvel opened this issue Nov 18, 2023 · 0 comments · Fixed by #116
Closed

Mobile nav menu is overlapped by higher z-indexed visual elements when open #115

DarrickFauvel opened this issue Nov 18, 2023 · 0 comments · Fixed by #116
Assignees
@DarrickFauvel
Labels
bug Something isn't working

Comments

@DarrickFauvel
Copy link
Contributor

Describe the problem
When the mobile nav menu is open, visual elements like the page heading and colored balls appear on top of the menu.

Actual behavior
The page heading displays persistently on top of the mobile menu.
The colored balls appear briefly on top and then quickly display behind the mobile menu. The z-index stacking order changes.

Expected behavior
The mobile menu should display on top of the page heading.
The colored balls should display immediately behind the mobile menu. No z-index stacking order change.

To Reproduce
Steps to reproduce the behavior:

  1. Make sure your screen size is about less than 768px wide
  2. Go to https://yumyumyes.com/search
  3. Click on the hamburger (3 bars) menu icon
  4. See the heading "YumYum Time!!" appear to overlap the mobile menu
  5. Also, notice how the colored ball appears on top for a moment, and quickly displays behind the mobile menu

Screenshots
Immediate display when opening menu:
image

About a half second after the menu opens:
image

Your Environment:

  • Microsoft Edge -- Version 119.0.2151.58 (Official build) (64-bit)
  • Microsoft Windows 11
@DarrickFauvel DarrickFauvel added the bug Something isn't working label Nov 18, 2023
DarrickFauvel pushed a commit that referenced this issue Nov 18, 2023
fix(header.jsx): add z-index to nav element
fbe40d5 
Add z-index to nav element

issue #115
DarrickFauvel pushed a commit that referenced this issue Nov 18, 2023
fix(search.jsx): remove z-index from heading
9372547 
Remove z-index from heading

issue #115
DarrickFauvel pushed a commit that referenced this issue Nov 18, 2023
fix(search.jsx): move colored balls code above heading for proper sta…
1873016 
…cking order

Move colored balls code above heading for proper stacking order

issue #115
DarrickFauvel pushed a commit that referenced this issue Nov 18, 2023
style(search.jsx): add white-space for better readability
782ade5 
Add white-space for better readability

issue #115
@DarrickFauvel DarrickFauvel linked a pull request Nov 18, 2023 that will close this issue
Fix/z-index issue affecting mobile menu #115 #116
Merged
@DarrickFauvel DarrickFauvel self-assigned this Nov 18, 2023
DarrickFauvel added a commit that referenced this issue Nov 18, 2023
@DarrickFauvel
Merge pull request #116 from chingu-voyages/fix/z-index-issue-115
859b9c4 
Fix/z-index issue affecting mobile menu #115
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DarrickFauvel DarrickFauvel

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix/z-index issue affecting mobile menu #115 chingu-voyages/yumyumyes
1 participant
@DarrickFauvel