ionic

How to make custom header in Ionic Framework

By: Ryan Wong at

In my startup application, I didn’t like the standard look of ionic header bar so I had to make it ourself.

What I wanted was 1 icon button on the very left, 1 icon button on the very right and our app logo in the middle.

To implement this I did the following:

1.In the index.html file, I used ion-view.

1
2
3
4
5
6
<body ng-app="myapp" animation="no-animation">
 <ion-nav-view>
 <ion-view></ion-view>
 </ion-nav-view>
 <!-- scripts -->
</body>

  1. In our template page, I did the following:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <ion-header-bar class="bar-positive bargrey header-spacing">
     <div class="header-section homepost">
      <button class="button button-clear no-animation" >
       <i class="icon ion-ios-home-outline"></i>
      </button>
     </div>
     <div class="header-section">
      <img src="/img/logo.png"/>
     </div>
     <div class="header-section notify">
      <button class="button button-clear no-animation" >
       <i class="icon ion-android-star"></i>
      </button>
     </div>
    </ion-header-bar>

SCSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.header-spacing{
    width: 100%;
    .header-section{
        float:left;
        width: 33%;
        text-align: center;

        img{
            width: 68px;
            height: 24px;
        }
    }
    .notify {
        text-align: right;
    }
    .homepost{
        text-align: left;
    }
}

Hope it helps you out.