Hide the mobile tab bar on specific screens only (not globally)

[JB2806]

Hi everyone,

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:

1. 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:

   <div class="hide-tabs" style="display:none"></div>
   
   

   This didn’t affect the tab bar (I suspect the bar lives in the app “shell,” outside the screen’s DOM subtree).

2. Sibling combinator from a marker component:

   .hide-tabs ~ div[class*="mobile-tab-bar"] { display: none !important; }
   
   

   No effect (likely not a sibling in the same container).

3. 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!

[Jeff_Hager]

How about if you just open the screen as a overlay? On mobile it covers the navigation bar.

[ThinhDinh]

@JB2806

Is there a supported way to hide the mobile tab bar only on specific screens (CSS or built-in setting)?

You’re correct on the marker part here, what I usually do is set a custom CSS class in the rich text component settings and go with it, e.g:

#page-root:has(.public-header) #nav-bar-button-region {
display: none !important;
}

With public-header being the custom class name here.

So in your case it would be:

#page-root:has(.class-name-here) div[class*="mobile-tab-bar"] {
  display: none;
}

[JB2806]

Title: :has() marker approach isn’t hiding the mobile tab bar on a specific screen

Hi everyone,

I’m trying to hide the mobile tab bar only on the Home screen using a marker + :has() approach.

In Custom CSS I added:

#page-root:has(.hide-tabs-marker) div[class*="mobile-tab-bar"] {
  display: none;
}

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?

Happy to share a preview link via DM. Thanks!

[Jeff_Hager]

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.

[JB2806]

Thank you, I tried but nothing happens…

[ThinhDinh]

Did you turn “preview custom CSS” on?

Can you add some screenshots of how you’re setting it up?