# Transparent navbar

**URL:** <https://forum.ionicframework.com/t/transparent-navbar/94747>\
**Category:** ionic-v3\
**Created:** [June 17, 2017, 8:39am UTC](https://forum.ionicframework.com/t/transparent-navbar/94747 "2017-06-17T08:39:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![wuilmerj24](https://avatars.discourse-cdn.com/v4/letter/w/c67d28/32.png) [@wuilmerj24](https://forum.ionicframework.com/u/wuilmerj24)\
**Post date:** [June 17, 2017, 8:39am UTC](https://forum.ionicframework.com/t/transparent-navbar/94747/1 "2017-06-17T08:39:23Z")

</div>

I have the following code: `<ion-header no-border transparent> <ion-navbar hideBackButton="true" transparent> <button ion-button icon-only menuToggle color="dark"><ion-icon name="menu" md="md-menu"></ion-icon></button> <ion-title menuToggle>ENKI</ion-title> </ion-navbar> </ion-header>`  
but I want the background to be transparent. I added the tag transparent, class transparent and without positive results

---

<div class="post-metadata">

**Author:** ![nuttloose](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nuttloose/32/110202_2.png) [@nuttloose](https://forum.ionicframework.com/u/nuttloose)\
**Post date:** [June 17, 2017, 9:09pm UTC](https://forum.ionicframework.com/t/transparent-navbar/94747/2 "2017-06-17T21:09:59Z")

</div>

This should work. Add this to the page sass.

```auto
ion-header {
  .toolbar {
    position: absolute;

    .toolbar-background {
      background: transparent;
    }
    .toolbar-title {
      color: black;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![wuilmerj24](https://avatars.discourse-cdn.com/v4/letter/w/c67d28/32.png) [@wuilmerj24](https://forum.ionicframework.com/u/wuilmerj24)\
**Post date:** [June 18, 2017, 3:33am UTC](https://forum.ionicframework.com/t/transparent-navbar/94747/3 "2017-06-18T03:33:41Z")

</div>

In the ion-header I have a btn menu which opens the menu. But adding the styles you gave me does not work. The div of the map is on the header the click does not work on the header

---

<div class="post-metadata">

**Author:** ![neomib](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/neomib/32/121999_2.png) [@neomib](https://forum.ionicframework.com/u/neomib)\
**Post date:** [June 18, 2017, 5:55am UTC](https://forum.ionicframework.com/t/transparent-navbar/94747/4 "2017-06-18T05:55:17Z")

</div>

Try it without the `position:absolute`. If make sure yor css is not overridden by ionic css.

---

<div class="post-metadata">

**Author:** ![wuilmerj24](https://avatars.discourse-cdn.com/v4/letter/w/c67d28/32.png) [@wuilmerj24](https://forum.ionicframework.com/u/wuilmerj24)\
**Post date:** [June 18, 2017, 6:19am UTC](https://forum.ionicframework.com/t/transparent-navbar/94747/5 "2017-06-18T06:19:17Z")

</div>

Styles are applied correctly. The problem is that the div of the native map is placed above the header when applying the absolute position

---

<div class="post-metadata">

**Author:** ![neomib](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/neomib/32/121999_2.png) [@neomib](https://forum.ionicframework.com/u/neomib)\
**Post date:** [June 18, 2017, 7:01am UTC](https://forum.ionicframework.com/t/transparent-navbar/94747/6 "2017-06-18T07:01:29Z")

</div>

And if you delete the absolute position it is no good?  
I think that if you want to change the background only you shouldn’t change position.

---

<div class="post-metadata">

**Author:** ![wuilmerj24](https://avatars.discourse-cdn.com/v4/letter/w/c67d28/32.png) [@wuilmerj24](https://forum.ionicframework.com/u/wuilmerj24)\
**Post date:** [June 18, 2017, 5:01pm UTC](https://forum.ionicframework.com/t/transparent-navbar/94747/7 "2017-06-18T17:01:29Z")

</div>

To apply the transparent background if I apply the absolute position changes the color backgroun to transparent, otherwise it does not change it

---

<div class="post-metadata">

**Author:** ![SatyaVaishnav](https://avatars.discourse-cdn.com/v4/letter/s/90db22/32.png) [@SatyaVaishnav](https://forum.ionicframework.com/u/SatyaVaishnav)\
**Post date:** [May 6, 2018, 6:07am UTC](https://forum.ionicframework.com/t/transparent-navbar/94747/8 "2018-05-06T06:07:11Z")

</div>

```auto
Please Try This

HTML = <ion-header transparent>
Scss = ion-header[transparent] .toolbar-background { background: transparent;}

```

---

<div class="post-metadata">

**Author:** ![teamcloud](https://avatars.discourse-cdn.com/v4/letter/t/4bbf92/32.png) [@teamcloud](https://forum.ionicframework.com/u/teamcloud)\
**Post date:** [August 21, 2019, 5:35pm UTC](https://forum.ionicframework.com/t/transparent-navbar/94747/9 "2019-08-21T17:35:32Z")

</div>

Maybe this module could help:

> **[toriphes/ion-header-scroll-opacity](https://github.com/toriphes/ion-header-scroll-opacity)**
>
> Change header background opacity on content scroll - toriphes/ion-header-scroll-opacity

---

<div class="post-metadata">

**Author:** ![esneideramy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/esneideramy/32/119524_2.png) [@esneideramy](https://forum.ionicframework.com/u/esneideramy)\
**Post date:** [March 27, 2020, 11:49pm UTC](https://forum.ionicframework.com/t/transparent-navbar/94747/10 "2020-03-27T23:49:55Z")

</div>

I found this tutorial very simple and with the best result 🙂  
[https://juniorabranches.herokuapp.com/posts/ionic-3-creating-transparent-header](https://juniorabranches.herokuapp.com/posts/ionic-3-creating-transparent-header)

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:01pm UTC](https://forum.ionicframework.com/t/transparent-navbar/94747/11 "2021-07-19T21:01:21Z")

</div>

Closed on July 19, 2021, 9:01pm UTC