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

Fix/z-index issue affecting mobile menu #115 #116

Merged
merged 5 commits into from
Nov 18, 2023
Merged

Fix/z-index issue affecting mobile menu #115 #116

merged 5 commits into from
Nov 18, 2023

Conversation

DarrickFauvel
Copy link
Contributor

Fixed the z-index issue with visual elements overlapping the mobile menu when opening.

Problems:

  • When the mobile menu is opening over a colored ball or heading, the visual element will briefly appear on top of the mobile menu and then go behind the menu.
  • When the mobile menu is opened on the Search page, the page heading overlaps the mobile menu.

Solution:

  • Added z-index class z-10 to the nav element in the Header.jsx file.
  • Removed z-index class z-10 from Search page heading component.
  • Also moved colored balls code from bottom of containing div to the top, above the page Heading component. This is to provide correct z-index stacking order/context.

[Darrick Fauvel] added 5 commits November 18, 2023 09:18
fix(header.jsx): add z-index to nav element
fbe40d5 
Add z-index to nav element

issue #115
fix(search.jsx): remove z-index from heading
9372547 
Remove z-index from heading

issue #115
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
style(search.jsx): add white-space for better readability
782ade5 
Add white-space for better readability

issue #115
chore(release): 0.0.33
6f4134b
@DarrickFauvel DarrickFauvel added the bug Something isn't working label Nov 18, 2023
@DarrickFauvel DarrickFauvel self-assigned this Nov 18, 2023
@netlify Netlify
Copy link

netlify bot commented Nov 18, 2023 •
edited
Loading

✅ Deploy Preview for yumyumyesdev ready!

Name Link
🔨 Latest commit 6f4134b
🔍 Latest deploy log https://app.netlify.com/sites/yumyumyesdev/deploys/6558cf9799e9d0000848483d
😎 Deploy Preview https://deploy-preview-116--yumyumyesdev.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@DarrickFauvel DarrickFauvel linked an issue Nov 18, 2023 that may be closed by this pull request
Mobile nav menu is overlapped by higher z-indexed visual elements when open #115
Closed
@github-actions GitHub Actions
Copy link

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type Occurrences Fixable
Errors 0 0
Warnings 0 0
Ignored 0 N/A
  • Result: ✅ success
  • Annotations: 0 total
Report generated by eslint-plus-action

joekotvas
joekotvas approved these changes Nov 18, 2023
View reviewed changes
Copy link
Contributor

@joekotvas joekotvas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

GJ

@DarrickFauvel DarrickFauvel merged commit 859b9c4 into development Nov 18, 2023
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@joekotvas joekotvas joekotvas approved these changes

@timDeHof timDeHof timDeHof approved these changes

Assignees

@DarrickFauvel DarrickFauvel

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

Successfully merging this pull request may close these issues.

Mobile nav menu is overlapped by higher z-indexed visual elements when open
3 participants
@DarrickFauvel @timDeHof @joekotvas