# \[Ionic 2\] Transparent Header

**URL:** <https://forum.ionicframework.com/t/ionic-2-transparent-header/53017>\
**Category:** ionic-v3\
**Created:** [May 26, 2016, 1:51am UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017 "2016-05-26T01:51:57Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Corin](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Corin](https://forum.ionicframework.com/u/Corin)\
**Post date:** [May 26, 2016, 1:51am UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017/1 "2016-05-26T01:51:57Z")

</div>

Hi Guys,

How to make the header transparent?

Before it was so easy…

Thank you!

---

<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:** [May 26, 2016, 7:08pm UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017/2 "2016-05-26T19:08:23Z")

</div>

You can use the transparent property on the navbar.

```auto
<ion-navbar *navbar transparent>
  <ion-title>
    Home
  </ion-title>
</ion-navbar>

```

---

<div class="post-metadata">

**Author:** ![Corin](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Corin](https://forum.ionicframework.com/u/Corin)\
**Post date:** [May 26, 2016, 9:34pm UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017/3 "2016-05-26T21:34:32Z")

</div>

> [@mhartington](#):
>
> transparent

Thank you @mhartington.

I’ve tried this way before, but in this case my navbar disappear and my content is not full-screen…

What should I do?

Thank you.

---

<div class="post-metadata">

**Author:** ![Corin](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Corin](https://forum.ionicframework.com/u/Corin)\
**Post date:** [May 30, 2016, 8:42am UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017/4 "2016-05-30T08:42:25Z")

</div>

I still can’t get a transparent header in my project.

The only I’ve found its to not use any navbar in my page and its not the best way to keep track of the navigation stack ☹

Any help, please?

Is there any way to make the navbar transparent and the content of my page full-screen?

Thank you!

---

<div class="post-metadata">

**Author:** ![Corin](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Corin](https://forum.ionicframework.com/u/Corin)\
**Post date:** [October 18, 2016, 10:46pm UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017/5 "2016-10-18T22:46:27Z")

</div>

Fullscreen mode still not working properly, any help?

---

<div class="post-metadata">

**Author:** ![vsecco](https://avatars.discourse-cdn.com/v4/letter/v/cab0a1/32.png) [@vsecco](https://forum.ionicframework.com/u/vsecco)\
**Post date:** [November 7, 2016, 11:06am UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017/6 "2016-11-07T11:06:15Z")

</div>

Hey everbody,

I’m trying make my navbar transparent.  
i’m using beta 11.

Anyone know how to do that?

Thanks

---

<div class="post-metadata">

**Author:** ![Corin](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Corin](https://forum.ionicframework.com/u/Corin)\
**Post date:** [November 8, 2016, 8:02pm UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017/7 "2016-11-08T20:02:49Z")

</div>

Here you are:  
.html

```
<ion-header no-shadow>

  <ion-navbar transparent>
  </ion-navbar>

</ion-header>

```

.scss

```
.scroll-content {
    background: #1e1e1e;
}

ion-navbar .toolbar-background {
    background: transparent;
}

ion-content .scroll-content {
    margin-top:0px !important;
}

```

I hope it helps…

---

<div class="post-metadata">

**Author:** ![vsecco](https://avatars.discourse-cdn.com/v4/letter/v/cab0a1/32.png) [@vsecco](https://forum.ionicframework.com/u/vsecco)\
**Post date:** [November 9, 2016, 12:14pm UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017/8 "2016-11-09T12:14:28Z")

</div>

Helps!

I get the concepts, but did a litle diferent.

But very thanks!

---

<div class="post-metadata">

**Author:** ![HsuanXyz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hsuanxyz/32/108884_2.png) [@HsuanXyz](https://forum.ionicframework.com/u/HsuanXyz)\
**Post date:** [March 21, 2017, 2:14pm UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017/9 "2017-03-21T14:14:58Z")

</div>

> **[HsuanXyz/ionic2-transparent-bar](https://github.com/HsuanXyz/ionic2-transparent-bar)**
>
> ionic2-transparent-bar - A transparent bar DEMO in ionic2

---

<div class="post-metadata">

**Author:** ![jeneser](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jeneser/32/108035_2.png) [@jeneser](https://forum.ionicframework.com/u/jeneser)\
**Post date:** [April 5, 2017, 2:15pm UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017/10 "2017-04-05T14:15:52Z")

</div>

There are two solutions here:  
[View the solution](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/41)

---

<div class="post-metadata">

**Author:** ![alibahjat](https://avatars.discourse-cdn.com/v4/letter/a/7ba0ec/32.png) [@alibahjat](https://forum.ionicframework.com/u/alibahjat)\
**Post date:** [May 18, 2017, 11:42am UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017/11 "2017-05-18T11:42:11Z")

</div>

> [@mhartington](#):
>
> \*navbar transparent

when i do this the toggle button disapper is there any solution to make it not hidden

---

<div class="post-metadata">

**Author:** ![Qbiqs0971](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/qbiqs0971/32/123691_2.png) [@Qbiqs0971](https://forum.ionicframework.com/u/Qbiqs0971)\
**Post date:** [October 21, 2018, 5:06pm UTC](https://forum.ionicframework.com/t/ionic-2-transparent-header/53017/12 "2018-10-21T17:06:16Z")

</div>

Thank you so much … i’m looking a couple days for this issue and it’s work perfectly