[Ionic 2] Transparent Header

Hi Guys,

How to make the header transparent?

Before it was so easy…

Thank you!

You can use the transparent property on the navbar.

<ion-navbar *navbar transparent>
  <ion-title>
    Home
  </ion-title>
</ion-navbar>
2 Likes

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.

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 :frowning:

Any help, please?

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

Thank you!

Fullscreen mode still not working properly, any help?

Hey everbody,

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

Anyone know how to do that?

Thanks

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…

3 Likes

Helps!

I get the concepts, but did a litle diferent.

But very thanks!

There are two solutions here:
View the solution

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

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