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

**URL:** <https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984>\
**Category:** Ask for Help\
**Tags:** custom-css\
**Created:** [August 23, 2025, 5:25pm UTC](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984 "2025-08-23T17:25:56Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![JB2806](https://avatars.discourse-cdn.com/v4/letter/j/f6c823/32.png) [@JB2806](https://community.glideapps.com/u/JB2806)\
**Post date:** [August 23, 2025, 5:25pm UTC](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984/1 "2025-08-23T17:25:56Z")

</div>

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:

```auto
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:

2. Sibling combinator from a marker component:

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!

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [August 23, 2025, 5:40pm UTC](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984/2 "2025-08-23T17:40:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 23, 2025, 11:03pm UTC](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984/3 "2025-08-23T23:03:20Z")

</div>

> [@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:

```auto
#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:

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

```

---

<div class="post-metadata">

**Author:** ![JB2806](https://avatars.discourse-cdn.com/v4/letter/j/f6c823/32.png) [@JB2806](https://community.glideapps.com/u/JB2806)\
**Post date:** [August 27, 2025, 12:01pm UTC](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984/4 "2025-08-27T12:01:09Z")

</div>

**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:

```css
#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:

```html
<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!

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [August 27, 2025, 12:11pm UTC](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984/5 "2025-08-27T12:11:12Z")

</div>

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.

 ![1000005752](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/6/b6ea73ca67c72c65c2d2f68596f9576496b16154.jpeg)

---

<div class="post-metadata">

**Author:** ![JB2806](https://avatars.discourse-cdn.com/v4/letter/j/f6c823/32.png) [@JB2806](https://community.glideapps.com/u/JB2806)\
**Post date:** [August 27, 2025, 7:34pm UTC](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984/6 "2025-08-27T19:34:55Z")

</div>

Thank you, I tried but nothing happens…

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 27, 2025, 11:24pm UTC](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984/7 "2025-08-27T23:24:18Z")

</div>

![CleanShot 2025-08-28 at 06.23.55](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/8/f8eef04b76576c3d546bbdd747e10516f78bd5f1.png)

Did you turn “preview custom CSS” on?

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 29, 2025, 6:56am UTC](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984/8 "2025-08-29T06:56:18Z")

</div>

> [@JB2806](#):
>
> “Use compiled CSS” is ON,

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`.

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

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.

> [@JB2806](#):
>
> what’s the correct ancestor/selector to target for the tab bar?

If your goal is to hide only one specific tab bar, you can refine it in different ways:

1. **By tab button order** :

2. **By tab state** :

3. **By tab name** :

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.

---

<div class="post-metadata">

**Author:** ![JB2806](https://avatars.discourse-cdn.com/v4/letter/j/f6c823/32.png) [@JB2806](https://community.glideapps.com/u/JB2806)\
**Post date:** [August 29, 2025, 9:52pm UTC](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984/9 "2025-08-29T21:52:04Z")

</div>

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

It works perfectly!!! Thanks 🥳

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [September 5, 2025, 9:52pm UTC](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984/10 "2025-09-05T21:52:12Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.