How to make a transparent header on Ionic 2


 

Have you ever tried to customize your app header on ionic 2? What about making it transparent? I have, and I can say it took me a long time to realise how simple this was. At first I was able to achieve the transparency effect by using some hackish css… but it wasn’t really the prettiest solution (imagine a bunch of !important all around). It took me a while but I found out that the ionic team had already created wonderful properties that do all the work for you. This is what I will be showing you today.

 

Recently this topic was brought up on Ionic slack community, and I thought: Why not write about it? It might save some people a few good hours of research. If you haven’t heard of this community, it’s made of over 11 thousand developers and designers that discuss all kinds of things about ionic 1 and 2. You should definitely join us!

 

ANYHOW. ¯\_(ツ)_/¯

Note: Before starting this tutorial, make sure you have the latest ionic and cordova installed. If you do not have it, make sure to install node then run on your terminal:

$ npm install -g ionic cordova
Have everything you need? Let’s do it.

First, create your project structure:

$ ionic start transparentHeaderDemo --v2 sidemenu
$ cd transparentHeaderDemo

 

Right after that, let’s add a background image to our main page by accessing our pages/page1/page1.scss file and adding the following code:

page-page1 {
  ion-content {
    background-image: url('https://images.pexels.com/photos/107958/pexels-photo-107958.jpeg?w=940&h=650&auto=compress&cs=tinysrgb');
    background-size: cover;
    background-position-x: 50%;
  }
}

Now we have a beautiful background that’ll help us see the transparency effect. From now on, I’ll be showing how the app looks on android (on the left) and ios (on the right):

 

Let’s add some content by going to pages/page1/page1.html and adding the following code:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-card>
    <img src="https://images.pexels.com/photos/2156/sky-earth-space-working.jpg?w=940&h=650&auto=compress&cs=tinysrgb" />
  </ion-card>
  <ion-card>
    <img src="https://images.pexels.com/photos/24895/pexels-photo-24895.jpg?w=940&h=650&auto=compress&cs=tinysrgb" />
  </ion-card>
  <ion-card>
    <img src="https://images.pexels.com/photos/87651/earth-blue-planet-globe-planet-87651.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"
    />
  </ion-card>
  <ion-card>
    <img src="https://images.pexels.com/photos/23789/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb" />
  </ion-card>
  <ion-card>
    <img src="https://images.pexels.com/photos/2159/flight-sky-earth-space.jpg?w=940&h=650&auto=compress&cs=tinysrgb" />
  </ion-card>
</ion-content>

 

Which will give us the following result:

 

Ok, so now we have enough content to scroll and it’s time to customize that header. As I told you before, the framework already has built in properties that do all the work. All you gotta do is add the transparent input property to your ion-navbar. Yes, that simple. What took me a chunk of css ended up as just a simple word in a component:

<ion-header>
  <ion-navbar transparent>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

 

Also, add a some small stylings just to make the header title and button white:

page-page1 {
  ion-content {
    background-image: url('https://images.pexels.com/photos/107958/pexels-photo-107958.jpeg?w=940&h=650&auto=compress&cs=tinysrgb');
    background-size: cover;
    background-position-x: 50%;
  }
  .bar-buttons,
  .toolbar-title {
    color: #fff;
  }

 

With that we achieve this nice result:

 

 

But wait, there’s a weird line on my android app! See the red arrow pointing at it? Yes, by default, all headers on android have a box-shadow effect. This may be sometimes useful, even when using transparent headers, but let’s remove it for now. To do so, all we have to do is add another input property, no-border, to our ion-header:

<ion-header no-border>
  <ion-navbar transparent>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

 

Which finally leads us to what we want:

 

Great! Look at what we have so far:

 

 

Wait! Isn’t the header supposed to be fully transparent? Why is the content not being shown as I slide it up?

This happens because the default behavior of a header on ionic is to not overlay content. Don’t worry though, if you want to achieve that, there’s another input property that helps us achieve that: fullscreen. This one you add on ion-content:

<ion-header no-border>
  <ion-navbar transparent>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>
<ion-content fullscreen padding>
  // code goes here..
</ion-content>

And there you have it! A nice transparency effect on your header:

 

To sum up

This is the final code used in this tutorial:

page1.html
<ion-header no-border>
  <ion-navbar transparent>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>
<ion-content fullscreen padding>
  <ion-card>
    <img src="https://images.pexels.com/photos/2156/sky-earth-space-working.jpg?w=940&h=650&auto=compress&cs=tinysrgb" />
  </ion-card>
  <ion-card>
    <img src="https://images.pexels.com/photos/24895/pexels-photo-24895.jpg?w=940&h=650&auto=compress&cs=tinysrgb" />
  </ion-card>
  <ion-card>
    <img src="https://images.pexels.com/photos/87651/earth-blue-planet-globe-planet-87651.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"
    />
  </ion-card>
  <ion-card>
    <img src="https://images.pexels.com/photos/23789/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb" />
  </ion-card>
  <ion-card>
    <img src="https://images.pexels.com/photos/2159/flight-sky-earth-space.jpg?w=940&h=650&auto=compress&cs=tinysrgb" />
  </ion-card>
</ion-content>
page1.scss
page-page1 {
  ion-content {
    background-image: url('https://images.pexels.com/photos/107958/pexels-photo-107958.jpeg?w=940&h=650&auto=compress&cs=tinysrgb');
    background-size: cover;
    background-position-x: 50%;
  }
  .bar-buttons,
  .toolbar-title {
    color: #fff;
  }
}

 

Yet a simple change, this can be a great improvement and add a lot of value to your app. This was my first tutorial for ionic2 ever written, and I hope you liked it and I hope it saves you time as it would have saved mine. Feel free to leave some feedback, make requests or do whatever else you want on the comments section.

See you next time!

yannbraga

Web and mobile developer. Occasionally do some origami on spare time :)

  • Arher

    Very nice! Keep up the good work!

  • Jeffrey Simbulan

    where did you declared these? or how did you determine these?
    .bar-buttons,
    .toolbar-title {
    color: #fff;
    }
    i dont see any class=”bar-buttons” etc on the page1 html

    • Hey Jeffrey! Actually the ion-navbar component renders out a set of elements: divs for toolbar content and background, a button for the navigation, all of which you can see if you inspect the elements. These classes are added by default from Ionic, so there was no need of adding new classes to that.

      • Jeffrey Simbulan

        i see. so i just need to inspect the element then add extra scss/css to it. got it

        • Well, most of the ionic components render a set of internal components, so if you ever feel curious, inspect them and check their structure/classes. This helps in most cases when you try adding a css rule and it doesn’t apply directly to the component.

  • Ikenna Anthony Okafor

    Yann, bot101 from slack. Keep up the good work!.

    • Thank you! This means a lot to me!
      There’s a new tutorial coming up tomorrow 😀

  • Manish Sankari

    Awesome

  • oumayma oulahou

    how to put a dynamic background image in ionic?

  • Foo Lun Leong

    You are the awesome person! Thank you for lesson me