# Changing the colour of the icons of bottom menu bar and header part of the tab

**URL:** <https://community.glideapps.com/t/changing-the-colour-of-the-icons-of-bottom-menu-bar-and-header-part-of-the-tab/31297>\
**Category:** Ask for Help\
**Created:** [September 3, 2021, 1:21am UTC](https://community.glideapps.com/t/changing-the-colour-of-the-icons-of-bottom-menu-bar-and-header-part-of-the-tab/31297 "2021-09-03T01:21:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Miguel\_Coelho](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/miguel_coelho/32/17150_2.png) [@Miguel\_Coelho](https://community.glideapps.com/u/Miguel_Coelho)\
**Post date:** [September 3, 2021, 1:21am UTC](https://community.glideapps.com/t/changing-the-colour-of-the-icons-of-bottom-menu-bar-and-header-part-of-the-tab/31297/1 "2021-09-03T01:21:01Z")

</div>

Hey guys!

I am wondering whether anyone has created a CSS code to change the colour of the icons of bottom menu bar and header part of the tab?

I have actually found a way to change the color of the bottoms but now I cannot find a way to change the colour of the icons.

```
[data-test="app-button-view"] { background-color: #ff1493 !important; border-color: #ff1493 !important; } [data-test="app-button-view"]:active { background-color: pink !important; border-color: pink !important; } Would be really greteful if someone could help!
```

---

<div class="post-metadata">

**Author:** ![Miguel\_Coelho](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/miguel_coelho/32/17150_2.png) [@Miguel\_Coelho](https://community.glideapps.com/u/Miguel_Coelho)\
**Post date:** [September 3, 2021, 1:25am UTC](https://community.glideapps.com/t/changing-the-colour-of-the-icons-of-bottom-menu-bar-and-header-part-of-the-tab/31297/2 "2021-09-03T01:25:23Z")

</div>

![InkedCaptura de Ecrã (345)_LI](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/1/814dc267261d77633404a2e0f902d59c01001c43.jpeg)

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [September 3, 2021, 4:23am UTC](https://community.glideapps.com/t/changing-the-colour-of-the-icons-of-bottom-menu-bar-and-header-part-of-the-tab/31297/3 "2021-09-03T04:23:33Z")

</div>

Please try this.

```auto
<pre><span><style>
[data-test="nav-button-menu"] {
color: #ff57c7; /*←hamburger icon color*/
}
#tabBar { 
box-shadow:none;
background-color: #ff57c7 ;
}
#tabBar svg { 
color: white; /*←icon color*/
}
[role="tab"] {
color: black ; /*←text color*/
}

```

![スクリーンショット 2021-09-03 13.47.40](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/88b4acd1b4b6310ddb449921f4fd56b2425d8aa4.png)

---

<div class="post-metadata">

**Author:** ![Miguel\_Coelho](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/miguel_coelho/32/17150_2.png) [@Miguel\_Coelho](https://community.glideapps.com/u/Miguel_Coelho)\
**Post date:** [September 3, 2021, 11:29am UTC](https://community.glideapps.com/t/changing-the-colour-of-the-icons-of-bottom-menu-bar-and-header-part-of-the-tab/31297/4 "2021-09-03T11:29:51Z")

</div>

Amazing! Thank you so much!

---

<div class="post-metadata">

**Author:** ![Thoughts](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thoughts/32/46790_2.png) [@Thoughts](https://community.glideapps.com/u/Thoughts)\
**Post date:** [August 22, 2022, 2:58pm UTC](https://community.glideapps.com/t/changing-the-colour-of-the-icons-of-bottom-menu-bar-and-header-part-of-the-tab/31297/5 "2022-08-22T14:58:21Z")

</div>

Is there a way to make the selected tab be different?

---

<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, 2022, 12:46am UTC](https://community.glideapps.com/t/changing-the-colour-of-the-icons-of-bottom-menu-bar-and-header-part-of-the-tab/31297/6 "2022-08-23T00:46:37Z")

</div>

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

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

[data-test="nav-button-menu"] {
color: #ff57c7; /*←hamburger icon color*/
}
#tabBar { 
box-shadow:none;
background-color: black ;
}

#tabBar svg { 
color: white; /*←icon color*/
}

[role="tab"] {
color: white ; /*←text color*/
}

button[aria-label="Demo 1"] {
color: gold;
}

button[aria-label="Demo 1"] >div svg {
color: gold !important;
}

```

Using the tab name in the last 2 parts to change its color.

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

Example for “Demo 2” tab.