I’m using Glide Apps with bottom navigation (the mobile tab bar). I found the CSS below (thank you @thinhDinh), which successfully hides the tab bar — but it hides it on every screen:
div[class*="mobile-tab-bar"] {
display: none;
}
What I’m trying to do is hide the tab bar only on certain screens (e.g., Detail or Profile), while keeping it visible on others (e.g., Home, Missions).
What I’ve tried:
Page “markers” + :has() to scope the rule only when a marker exists on the screen:
/* Example attempts (in global CSS) */
html:has(.hide-tabs) div[class*="mobile-tab-bar"] { display: none !important; }
#page-root:has(.hide-tabs) div[class*="mobile-tab-bar"] { display: none !important; }
With a small Rich Text component on target screens:
No effect (likely not a sibling in the same container).
Broader selectors like [class*="tab-bar"] or nav[role="tablist"] — this risks breaking the app shell (I even saw a white screen), so I rolled that back.
Question(s):
Is there a supported way to hide the mobile tab bar only on specific screens (CSS or built-in setting)?
If CSS is the way, what’s the reliable selector for the tab bar element in Glide Apps, and is there a recommended ancestor I can target that also “sees” screen content (so :has(.hide-tabs) can work)?
Alternatively, is there a best-practice approach (e.g., different layouts/screens without the tab bar, or a built-in visibility condition I’m missing)?
Environment:
Glide Apps (bottom navigation enabled)
Tested on iOS Safari and desktop Chrome
Custom CSS added at the app level (global), not just inside a page component
I can share a preview link via DM if it helps. Thanks a lot for any guidance or examples!
On the Home screen I added a small Rich Text component with just:
<div class="hide-tabs-marker"></div>
Published the app, hard-refreshed, “Use compiled CSS” is ON, tested in the builder preview and live app (iOS Safari + desktop Chrome) — but nothing happens, the tab bar remains visible.
Any idea what I’m missing?
Is the tab bar outside #page-root in the current DOM?
If so, what’s the correct ancestor/selector to target for the tab bar?
Is there a recommended, supported way to hide the bottom bar on a per-screen basis?
Put the class name here. You don’t need to create a div tag inside the rich text. I don’t think you need to put any content inside the rich text component.
I think I can see where the problem comes from. If you turn “Use compiled CSS” ON and still write #page-root in your code, that’s the catch. Glide will automatically prepend #page-root when compiled, so you end up with a duplicate. If you want to keep it ON, just remove #page-root from your selectors. Otherwise, I’d suggest turning it OFF so your CSS isn’t restricted only to elements under #page-root.
Another issue is in your selector. Right now you’re using *, so it’s matching every element whose class contains "mobile-tab-bar". That means it’s hiding all tab bars, not just the one you want.
If your goal is to hide only one specific tab bar, you can refine it in different ways:
As for the marker itself, you can attach the class to any element that only exists inside the tab you want to mark. It doesn’t have to be a richtext block like you’re using now.
