# Hamburger menu: hiding screens which are used?

**URL:** <https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766>\
**Category:** Feature Requests\
**Created:** [September 14, 2021, 9:47am UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766 "2021-09-14T09:47:52Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [September 14, 2021, 9:47am UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/1 "2021-09-14T09:47:52Z")

</div>

- [EDIT] Requalifying this topic in Feature request: be able to use a table/screen that user will see/use, but without having it appearing in the hamburger menu

* * *

Hi, in my app I am using several screens that the user accesses via a “Go to” action.

I don’t want them to appear in the _hamburger menu_, but when I hide them in this menu, the “Go to” action does not work anymore.  
 → Do you have an idea on how to solve this?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/3/b389fcf8a4a2d012dd93748421195515767d19b4.png)

Thanks in advance

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [September 14, 2021, 10:52am UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/2 "2021-09-14T10:52:38Z")

</div>

Just use the visibility conditions on the Tab to stop users seeing options on the hamburger menu.

I do this all the time - visible ‘if Role equals GodlikePowers’

🙂

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [September 14, 2021, 11:22am UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/3 "2021-09-14T11:22:32Z")

</div>

Thanks @Mark_Turrell.  
Are you speaking about “tab visibility conditions”? In this case the content of the screen is not available anymore to users.  
I want it to remain visible, but I don’t want the screen name appearing in the hamburger menu

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [September 14, 2021, 11:29am UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/4 "2021-09-14T11:29:39Z")

</div>

Got it - then it gets messy.

I have had to duplicate tabs (which I really do not like doing) to achieve this, which has the risk of components not being in sync because of changes (a bit easier as you can ‘copy all’ components, plus you can get lost (and go ‘back’ or arrows do not work).

I get what you are after now 🙂

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [September 14, 2021, 11:36am UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/5 "2021-09-14T11:36:25Z")

</div>

Thank you  
(my initial message was probably unclear… shortcomings in english!)

---

<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:** [September 14, 2021, 12:10pm UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/6 "2021-09-14T12:10:53Z")

</div>

Probably worth a try with CSS. Do you have any tabs in the main view that are not set in details?

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [September 14, 2021, 12:15pm UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/7 "2021-09-14T12:15:22Z")

</div>

Thanks @ThinhDinh.

No, apparently they all have a detail view.

---

<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:** [September 14, 2021, 1:22pm UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/8 "2021-09-14T13:22:03Z")

</div>

This is not the perfect solution. I can’t find a way to not touch the SVG and the tab title when we use 1 and 2, but seeing as you have more than 2 then it would work for 3 onwards.

```auto
<pre><span><style>

[id="flyout-root"] [aria-label="User profile"] + div :nth-of-type(3) {
display: none;
}

```

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [September 14, 2021, 1:31pm UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/9 "2021-09-14T13:31:11Z")

</div>

Nice, thanks!

The good news: it works

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/f/ef8d3912c6b645de22fe359c7c8708baeb761d99.png)

The bad one… the navigation buttons on the screen have disappeared + as well as a table with indicators + I cannot switch between users anymore 🙂

What I observe is:

- I have a home screen with _navigation buttons_ (“go to tab”) to different screens/tabs
- With the css, it does hide these screens/tabs in the hamburger menu, but it also hides de _navigation buttons_…

nb: there is an advantage if users cannot navigate any more → they will not experience all the bugs of my app!

---

<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:** [September 14, 2021, 1:56pm UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/10 "2021-09-14T13:56:56Z")

</div>

Looks like you have the wrong code here.

You should duplicate that flyout-root to all “types” you want to hide.

```auto
<pre><span><style>

[id="flyout-root"] [aria-label="User profile"] + div :nth-of-type(3) {
display: none;
}

[id="flyout-root"] [aria-label="User profile"] + div :nth-of-type(4) {
display: none;
}

```

I’m not sure if actually relates to your bug. What “navigation buttons” are you referring to?

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [September 14, 2021, 2:13pm UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/11 "2021-09-14T14:13:16Z")

</div>

It works great!  
@Mark_Turrell, it’s worth using the magic of @ThinhDinh

Many thanks Thinh Dinh!

---

<div class="post-metadata">

**Author:** ![nosehms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nosehms/32/30231_2.png) [@nosehms](https://community.glideapps.com/u/nosehms)\
**Post date:** [October 6, 2021, 8:18am UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/12 "2021-10-06T08:18:21Z")

</div>

Hi! Thanks for this!! But I have a “problem”, only works when user is logged in, not working for visitors. Can it be fixed?

---

<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:** [October 6, 2021, 8:45am UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/13 "2021-10-06T08:45:49Z")

</div>

Can you attach some screenshots of what does not work?

---

<div class="post-metadata">

**Author:** ![nosehms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nosehms/32/30231_2.png) [@nosehms](https://community.glideapps.com/u/nosehms)\
**Post date:** [October 6, 2021, 9:39am UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/14 "2021-10-06T09:39:12Z")

</div>

![ERROR TAB](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/6/76386e271c71f1e5e1ebb4e39474ccc618ea4d3a.png)

 ![Captura de pantalla 2021-10-06 a las 11.18.19](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/8/4846da919c75a2f6963303238d3ee1e7a0ae0c54.png)

---

<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:** [October 6, 2021, 10:18am UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/15 "2021-10-06T10:18:37Z")

</div>

If you have a static CSS then you have to make sure the number in the brackets match with the order of the tab.

I assume you want to hide the “Carta” tab? Try changing the nth-of-type(5) to the number that fits.

---

<div class="post-metadata">

**Author:** ![nosehms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nosehms/32/30231_2.png) [@nosehms](https://community.glideapps.com/u/nosehms)\
**Post date:** [October 6, 2021, 11:38am UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/16 "2021-10-06T11:38:25Z")

</div>

First of all, thanks for your patience, I’m not an expert in css. 🙏

Yes, I know i have to choose the number in the brackets. When the user is logged, “CARTA” tab is the 5th tab but when user is not logged is the 4th tab. So I tried different things with no result:

1- **nth-of-type(5)** Disables the “CARTA” tab correctly when user is logged. When user is not logged, nothing happen, no tab is hidden (See first image posted above, “CARTA” appears when not logged in).

> [id=“flyout-root”] [aria-label=“User profile”] + div :nth-of-type(5) {  
> display: none;  
> }

2- **nth-of-type(4)** Disables the “COMPLETAR PEDIDO” tab when user is logged. When user is not logged, nothing happen, no tab is hidden.

> [id=“flyout-root”] [aria-label=“User profile”] + div :nth-of-type(4) {  
> display: none;  
> }

3- **nth-of-type(4) + nth-of-type(5)** I tried both at the same time. Disables the “CARTA” and “COMPLETAR PEDIDO” tabs when user is logged. When user is not logged, nothing happen, no tab is hidden.

> [id=“flyout-root”] [aria-label=“User profile”] + div :nth-of-type(4) {  
> display: none;  
> }
> 
> [id=“flyout-root”] [aria-label=“User profile”] + div :nth-of-type(5) {  
> display: none;  
> }

When user is logged appears “MIS PEDIDOS” tab (only visible when user is logged with email) over “COMPLETAR PEDIDOS” tab. I deleted it to see if this caused the problem when user is not logged, but nothing changes.

---

<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:** [October 6, 2021, 11:58am UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/17 "2021-10-06T11:58:23Z")

</div>

Just to confirm, do you have multiple rich text columns and correctly display/hide them using visibility conditions?

---

<div class="post-metadata">

**Author:** ![nosehms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nosehms/32/30231_2.png) [@nosehms](https://community.glideapps.com/u/nosehms)\
**Post date:** [October 6, 2021, 12:08pm UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/18 "2021-10-06T12:08:39Z")

</div>

I only have one rich text in each screen without visibility conditions, everybody can see it, logged and non logged users.

This is the css i’m using:

> ```
> [data-test="glide-app-bar"] \>\* { backdrop-filter: blur(0px); background: #FFBF00; } [data-test="nav-button-menu"]{ display: yes; color: white; } [data-test="nav-bar"] \>div +\* { color: white !important; } [data-test="back-button"] svg { fill: white !important; } [id="flyout-root"] [aria-label="User profile"] + div :nth-of-type(4) { display: none; } [id="flyout-root"] [aria-label="User profile"] + div :nth-of-type(4) { display: none; }
> ```

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 6, 2021, 12:13pm UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/19 "2021-10-06T12:13:11Z")

</div>

Maybe this is a silly question, but why are you using CSS to show/hide tabs?  
Why not just use [Tab Visibility](https://docs.glideapps.com/all/reference/conditions/tab-visibility)?

---

<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:** [October 6, 2021, 12:19pm UTC](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766/20 "2021-10-06T12:19:23Z")

</div>

Yeah, I think this needs to be answered. In the original post, @AyS_0908 always have those tabs visible programmatically, but he wants those tabs hidden at the front end. Sounds like @nosehms is already using visibility conditions to show/hide tabs so CSS might not be needed.

[Next page](https://community.glideapps.com/t/hamburger-menu-hiding-screens-which-are-used/31766.md?page=2)