Bug Description
The mobile sidebar/menu navigation does not open when tapping the "More actions" (⋮) button on standard mobile browsers. The button is visible but completely unresponsive to touch events.
Affected site: https://herwaka.shesharp.org.nz
Theme: Almond
Configuration: Standard Mintlify setup with tabs navigation, no custom JS/CSS (see reproduction steps below)
Affected Browsers
| Browser |
OS |
Status |
| Safari |
iOS 18 |
❌ Sidebar does not open |
| Chrome |
iOS 18 |
❌ Sidebar does not open |
| Default browser |
Android |
❌ Sidebar does not open |
| WeChat built-in browser |
Android |
✅ Works |
| QQ built-in browser |
Android |
✅ Works |
| Any browser |
Desktop |
✅ Works |
The pattern suggests standard modern browser engines (WebKit on iOS, Chromium on Android) are affected, while older/custom WebView engines (WeChat X5, QQ) are not.
Investigation Findings
We conducted extensive debugging and identified two potential contributing factors in Mintlify's framework HTML/CSS output:
1. data-banner-state="visible" persists with no banner configured
Even when no banner property exists in docs.json, the rendered HTML still includes:
<html data-banner-state="visible" ...>
This triggers the Mintlify CSS rule:
[data-banner-state=visible] { --banner-height: 2.5rem }Setting --banner-height to 2.5rem when no banner exists. Several layout elements reference this variable:
.top-[var(--banner-height,0px)] /* navbar/sidebar offsets */
.mt-[var(--banner-height,0px)] /* content margin */
.h-[calc(100vh-3rem-var(--banner-height,0px))] /* container heights */
We attempted to override this with custom CSS (:root { --banner-height: 0px !important; }) and JavaScript (document.documentElement.setAttribute('data-banner-state', 'hidden')), but the sidebar still does not open.
2. AI Assistant floating overlay with pointer-events-auto inside pointer-events-none container
The rendered HTML includes this structure even when the assistant is not active:
<div class="sticky bottom-0 w-full z-20 pointer-events-none invisible" aria-hidden="true">
<div class="chat-assistant-floating-input w-full ... translate-y-[100px] opacity-0">
<div class="... pointer-events-auto ..."> <!-- re-enables touch events -->
<textarea id="chat-assistant-textarea" ...>Key issues:
- The outer wrapper has
pointer-events-none + invisible (visibility: hidden)
- The inner element overrides with
pointer-events-auto
- The
::before pseudo-element is h-[200px], creating a large invisible area
- On iOS WebKit and some Android browsers,
visibility: hidden on a parent does not reliably prevent touch event delivery to children that have pointer-events-auto
We attempted to fix this with:
[data-assistant-state="closed"] .chat-assistant-floating-input {
display: none !important;
}This successfully hides the element, but the sidebar still does not open.
Workarounds Attempted (All Failed)
- ✅ Removed all custom JavaScript and CSS from the project
- ✅ Removed banner configuration from
docs.json
- ✅ Added CSS to force
--banner-height: 0px !important
- ✅ Added JS to set
data-banner-state="hidden" on page load
- ✅ Added CSS to
display: none the assistant floating input
- ✅ Added CSS to force
pointer-events: none on all assistant children
- ❌ None of these fixed the mobile sidebar issue
Minimal Reproduction
Our docs.json is a standard Mintlify configuration with no unusual settings:
{
"$schema": "https://mintlify.com/docs.json",
"theme": "almond",
"name": "SheSharp - HER WAKA",
"colors": { "primary": "#c846ab", "light": "#8982ff", "dark": "#9b2e83" },
"favicon": "/favicon.svg",
"navigation": {
"tabs": [
{ "tab": "Programme", "groups": [{ "group": "Welcome", "pages": ["programme/about-her-waka", "programme/schedule", "programme/about-shesharp"] }] },
{ "tab": "Workshops", "groups": [{ "group": "Overview", "pages": ["workshop/overview"] }] },
{ "tab": "Tutorials", "groups": [{ "group": "Overview", "pages": ["tutorial/overview"] }] },
{ "tab": "Resources", "groups": [{ "group": "Career Resources", "pages": ["resources/employment-rights"] }] }
]
},
"logo": { "light": "/logo/light.svg", "dark": "/logo/dark.svg" }
}No custom index.mdx, no custom JS files, no custom CSS beyond the workaround attempts described above. The project contains only standard MDX documentation pages.
Expected Behavior
Tapping the "More actions" (⋮) button in the mobile navbar should open the sidebar navigation menu, allowing users to navigate between pages within the current tab.
Actual Behavior
The "More actions" button is visible but does not respond to touch/tap on iOS Safari, iOS Chrome, and Android default browsers. No sidebar appears. Other elements on the page (links, scroll) work normally.
Environment
- Mintlify theme:
almond
- Tested on: iPhone (iOS 18) and Android devices
- Deployment: Mintlify hosted (herwaka.shesharp.org.nz)
Bug Description
The mobile sidebar/menu navigation does not open when tapping the "More actions" (⋮) button on standard mobile browsers. The button is visible but completely unresponsive to touch events.
Affected site: https://herwaka.shesharp.org.nz
Theme: Almond
Configuration: Standard Mintlify setup with tabs navigation, no custom JS/CSS (see reproduction steps below)
Affected Browsers
The pattern suggests standard modern browser engines (WebKit on iOS, Chromium on Android) are affected, while older/custom WebView engines (WeChat X5, QQ) are not.
Investigation Findings
We conducted extensive debugging and identified two potential contributing factors in Mintlify's framework HTML/CSS output:
1.
data-banner-state="visible"persists with no banner configuredEven when no
bannerproperty exists indocs.json, the rendered HTML still includes:This triggers the Mintlify CSS rule:
Setting
--banner-heightto 2.5rem when no banner exists. Several layout elements reference this variable:We attempted to override this with custom CSS (
:root { --banner-height: 0px !important; }) and JavaScript (document.documentElement.setAttribute('data-banner-state', 'hidden')), but the sidebar still does not open.2. AI Assistant floating overlay with
pointer-events-autoinsidepointer-events-nonecontainerThe rendered HTML includes this structure even when the assistant is not active:
Key issues:
pointer-events-none+invisible(visibility: hidden)pointer-events-auto::beforepseudo-element ish-[200px], creating a large invisible areavisibility: hiddenon a parent does not reliably prevent touch event delivery to children that havepointer-events-autoWe attempted to fix this with:
This successfully hides the element, but the sidebar still does not open.
Workarounds Attempted (All Failed)
docs.json--banner-height: 0px !importantdata-banner-state="hidden"on page loaddisplay: nonethe assistant floating inputpointer-events: noneon all assistant childrenMinimal Reproduction
Our
docs.jsonis a standard Mintlify configuration with no unusual settings:{ "$schema": "https://mintlify.com/docs.json", "theme": "almond", "name": "SheSharp - HER WAKA", "colors": { "primary": "#c846ab", "light": "#8982ff", "dark": "#9b2e83" }, "favicon": "/favicon.svg", "navigation": { "tabs": [ { "tab": "Programme", "groups": [{ "group": "Welcome", "pages": ["programme/about-her-waka", "programme/schedule", "programme/about-shesharp"] }] }, { "tab": "Workshops", "groups": [{ "group": "Overview", "pages": ["workshop/overview"] }] }, { "tab": "Tutorials", "groups": [{ "group": "Overview", "pages": ["tutorial/overview"] }] }, { "tab": "Resources", "groups": [{ "group": "Career Resources", "pages": ["resources/employment-rights"] }] } ] }, "logo": { "light": "/logo/light.svg", "dark": "/logo/dark.svg" } }No custom
index.mdx, no custom JS files, no custom CSS beyond the workaround attempts described above. The project contains only standard MDX documentation pages.Expected Behavior
Tapping the "More actions" (⋮) button in the mobile navbar should open the sidebar navigation menu, allowing users to navigate between pages within the current tab.
Actual Behavior
The "More actions" button is visible but does not respond to touch/tap on iOS Safari, iOS Chrome, and Android default browsers. No sidebar appears. Other elements on the page (links, scroll) work normally.
Environment
almond