# How to change top bar background and the remaining bottom background

**URL:** <https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454>\
**Category:** Ask for Help\
**Created:** [June 24, 2022, 10:27am UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454 "2022-06-24T10:27:51Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [June 24, 2022, 10:27am UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/1 "2022-06-24T10:27:51Z")

</div>

Hi,

I need to change the background of the entire home screen.

the one top bar marked as red needs to change and the one marked as in blue needs to change.can i get the correct css ?

Also tell me how to remove the current header 8th wonder should changed to custom header by css.

---

<div class="post-metadata">

**Author:** ![MegannLock](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/megannlock/32/19680_2.png) [@MegannLock](https://community.glideapps.com/u/MegannLock)\
**Post date:** [June 24, 2022, 11:11am UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/2 "2022-06-24T11:11:04Z")

</div>

Here are some good CSS resources…

- [Code BOOK](https://code-book.glideapp.io/)
- [🖋 CSS Tricks](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2)

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [June 24, 2022, 5:21pm UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/3 "2022-06-24T17:21:13Z")

</div>

Have seen already but no use.

---

<div class="post-metadata">

**Author:** ![Tim\_Gestels](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tim_gestels/32/44044_2.png) [@Tim\_Gestels](https://community.glideapps.com/u/Tim_Gestels)\
**Post date:** [May 8, 2024, 3:28pm UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/4 "2024-05-08T15:28:15Z")

</div>

My customer wants me to change the color of the top header to black.  
For another app of myself I would like to hide it all together.

Is this possible? If so how?  
Or who could help me with this?  
Btw I checked some of the custom css resources but didn’t find the answer.

Many thanks!

Tim

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [May 8, 2024, 3:48pm UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/5 "2024-05-08T15:48:53Z")

</div>

Here is a new resource for CSS. You may also make a request from within the app if it’s not already there.

> **[CSS Library](https://css-library.glide.page/dl/library)**

---

<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:** [May 8, 2024, 11:43pm UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/6 "2024-05-08T23:43:36Z")

</div>

> [@Tim\_Gestels](#):
>
> For another app of myself I would like to hide it all together.

> **[CSS Library](https://css-library.glide.page/dl/library/s/8836b3/r/up4ofICPSMSgrlkMflerGg)**

This is an implementation of it, for just one tab. Please let me know if you need to hide it on all tabs.

> [@Tim\_Gestels](#):
>
> My customer wants me to change the color of the top header to black.

For this, please submit a request.

---

<div class="post-metadata">

**Author:** ![Tim\_Gestels](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tim_gestels/32/44044_2.png) [@Tim\_Gestels](https://community.glideapps.com/u/Tim_Gestels)\
**Post date:** [May 10, 2024, 8:03am UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/7 "2024-05-10T08:03:17Z")

</div>

thanks thin dinh!  
Based on the one I was able to let ChatGPT create the other ideas.  
Perhaps we should make a custom ChatBot for this 😉

#page-root:has(.auth) div[class\*=“desktop-nav-bar”],  
#page-root:has(.auth) div[class\*=“mobile-nav-bar”],  
#page-root:has(.auth) div[class\*=“unified-side-bar”] {  
background-color: black !important;  
}

  

#page-root div[class\*=“desktop-nav-bar”],  
#page-root div[class\*=“mobile-nav-bar”],  
#page-root div[class\*=“unified-side-bar”] {  
background-color: black !important;  
}

---

<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:** [May 10, 2024, 11:34pm UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/8 "2024-05-10T23:34:22Z")

</div>

The auth class is useful for when you need it on specific tabs (so you add a component with that class to those screens).

If you need it on all tabs, then this part should be enough 😉

```auto
#page-root div[class*=“desktop-nav-bar”],
#page-root div[class*=“mobile-nav-bar”],
#page-root div[class*=“unified-side-bar”] {
background-color: black !important;
}

```

---

<div class="post-metadata">

**Author:** ![Tim\_Gestels](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tim_gestels/32/44044_2.png) [@Tim\_Gestels](https://community.glideapps.com/u/Tim_Gestels)\
**Post date:** [May 14, 2024, 8:14pm UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/9 "2024-05-14T20:14:57Z")

</div>

Hi ThinDinh,

Thanks for your feedback again.

I’ve implemented the custom css mentioned below, however this also obscures the menu icons and back button in the interface, see screenshot. Do you know of a modified version that still shows it?

Many thanks for your support!

![Schermafbeelding 2024-05-14 om 22.14.17](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/4/d4b79e0c2eed1516e892d7961ceaa6d8cfde6806.png)  
 ![Schermafbeelding 2024-05-14 om 22.14.33](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/0/3052964c0b9cbdc4c5c6b9438f7aa3a7401f8849.png)  
 ![Schermafbeelding 2024-05-14 om 22.14.52](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/2/a252941b770fdb9c6e1fdc6b9ac8e86fd4e0fb70.png)

````auto
#page-root div[class*="desktop-nav-bar"], 
#page-root div[class*="mobile-nav-bar"],
#page-root div[class*="unified-side-bar"] {
    background-color: black !important;
}

/* Ensuring that the container holding the logo and name is always visible */
.mobile-nav-bar ___StyledHeader-sc-15t4b3x-1 .mobile-nav-bar___ StyledDiv2-sc-15t4b3x-3,
.mobile-nav-bar ___StyledHeader-sc-15t4b3x-1 .unified-nav-bar___ StyledDiv2-sc-1vuo1l1-3 {
    display: flex;
    align-items: center;
}```
````

---

<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:** [May 14, 2024, 10:34pm UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/10 "2024-05-14T22:34:06Z")

</div>

So the nav bar still needs to be in that color, but the menu and back icons has to be in a color that is visible?

---

<div class="post-metadata">

**Author:** ![Tim\_Gestels](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tim_gestels/32/44044_2.png) [@Tim\_Gestels](https://community.glideapps.com/u/Tim_Gestels)\
**Post date:** [May 14, 2024, 11:00pm UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/11 "2024-05-14T23:00:56Z")

</div>

Yes exactly

---

<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:** [May 14, 2024, 11:29pm UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/12 "2024-05-14T23:29:12Z")

</div>

```auto
#page-root div[class*="desktop-nav-bar"], 
#page-root div[class*="mobile-nav-bar"],
#page-root div[class*="unified-side-bar"] {
background-color: black;
}

[data-testid="menu-left-button"], span[class*="unified-nav-bar"] {
z-index: 1000;
color: white;
}

#page-root div[class*="desktop-nav-bar"] svg, 
#page-root div[class*="mobile-nav-bar"] svg,
#page-root div[class*="unified-side-bar"] svg,
div[class*="desktop-nav-bar___StyledDiv"] {
color: white;
}

```

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/8/f835f5b187774c43855313aa3c701b0552eeecd0.jpeg)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/6/86d8a51aa1a382f338506784db58e4a8fe6ad1ef.jpeg)

---

<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:** [May 15, 2024, 12:25am UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/13 "2024-05-15T00:25:56Z")

</div>

Perhaps you would like to try this alternative:

```auto
#page-root nav, #page-root nav > div, #nav-root > div {
background-color: black;
}

```

---

<div class="post-metadata">

**Author:** ![Tim\_Gestels](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tim_gestels/32/44044_2.png) [@Tim\_Gestels](https://community.glideapps.com/u/Tim_Gestels)\
**Post date:** [May 15, 2024, 1:11pm UTC](https://community.glideapps.com/t/how-to-change-top-bar-background-and-the-remaining-bottom-background/43454/14 "2024-05-15T13:11:19Z")

</div>

this is perfect thanks!