mantinedev / mantinedev/ui.mantine.dev
Mantine UI "Header with mega menu" breaks when the width is exactly on breakpoint sm (768px)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.9k
- Forks
- 364
- PR merge metrics
- No merged PRs in 30d
Description

When the device width is exactly at `sm` breakpoint, sometimes the mobile burger icon doesn't show up while the big pc version of the header items are still showing (and they're vertical).
My guess is the issue comes from `visibleFrom` and `hiddenFrom` in the example code. Can someone fix this?
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the “Header with mega menu” example and reproduce the layout at exactly 768px, focusing on the visibleFrom and hiddenFrom settings. Done means the mobile burger icon and desktop header items do not disappear, overlap, or appear vertically at the sm breakpoint.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100