Skip to content

Add dimming overlay when nav menu is opened in mobile version - #11

Open
hakdo99 wants to merge 3 commits into
mainfrom
ha-navbar
Open

Add dimming overlay when nav menu is opened in mobile version#11
hakdo99 wants to merge 3 commits into
mainfrom
ha-navbar

Conversation

@hakdo99

@hakdo99 hakdo99 commented Jul 26, 2026

Copy link
Copy Markdown
Collaborator

This PR fixes...

What I did...

  • Add a dimming overlay div when the navigation menu is opened in the mobile & tablet versions
  • Define color primary-blue-20% (--color-primary-01-20) for the dimming overlay
image

How to test...

In the mobile/tablet version, click on the hamburger button. As the navigation menu flies open, the rest of the content page should have a dimming color.

@netlify

netlify Bot commented Jul 26, 2026

Copy link
Copy Markdown

Deploy Preview for cherry-on-tech-website-2 ready!

Name Link
🔨 Latest commit 4c53d6a
🔍 Latest deploy log https://app.netlify.com/projects/cherry-on-tech-website-2/deploys/6a67e604d1d3e2000816ac85
😎 Deploy Preview https://deploy-preview-11--cherry-on-tech-website-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

Comment thread src/styles/header.css
z-index: 999;
}

/* Active Overlay State */

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Good job on the dimming overlay, but I'm encountering a small bug where if you enlarge the screen size before closing the mobile menu, the dimming overlay will remain on top of the Desktop screen.

Dimming overlay for mobile screen:

Image

Dimming overlay bug in desktop screen:

Image

@masuyama13 masuyama13 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Looks good to me aside from the issue Ashley already pointed out.

@ashleystringer ashleystringer left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Looks good with the desktop screen bug fixed

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