Search code examples
cssionic-frameworkionic2styles

Change the size of header - IONIC 2

I need to resize the header, how can I do it? I tried with a few css styles but it did not work.

I want to achieve the small one

I want to achieve the small one

Thanks!

edit: This is my code, hope this help...

thanks again and let me know if you need more details

............................................................................................................

page-home {

ion-navbar{
    width: 100%;
}
    
ion-title img{
    padding-left: 10px;
}

img.logo{
    padding-left: 110px;
    height: 20px;
}


p.title{
    font-size: 15px!important;
    padding-top: 10px;
    padding-left: 110px;
}

ion-content{
    margin-left: 100px;;
    margin-top: 40px;
}

ion-grid{
    text-align: center;
}

ion-row.header-row{
    text-align: center;
    font-weight: bold;

}

ion-col.header-col{
    background-color: #eee;
    border:1px solid #ddd!important;
}

ion-col.info-col{
    background-color: #fff;
    border:1px solid #ddd!important;

}

ion-col.col-align{
    padding-top: 14px;
}

.button{
    width: 90px;
}

}
<ion-header>
  <ion-navbar>
    <ion-title>
      <img alt="logo" class="logo" height="20" src="../assets/img/image.png">
    </ion-title>
  </ion-navbar>
  <ion-toolbar class="toolbar-header" color="dark">
    <ion-title>
          <p  class="title" text-wrap>Events</p>
    </ion-title>
  </ion-toolbar>
</ion-header>

<!--End Header-->

    <ion-content padding>
      <ion-grid>
        <ion-row class="header-row">
          <ion-col class="header-col" col-1>
            EVENTS
          </ion-col>
          <ion-col class="header-col" col-2>
            ORIGIN
        </ion-col>
          <ion-col class="header-col" col-2>
            DESTINATION
        </ion-col>
          <ion-col class="header-col" col-1>
            ERROR
          </ion-col>
          <ion-col class="header-col" col-2>
            FIRST EVENT
          </ion-col>
          <ion-col class="header-col" col-2>
            LATEST EVENT
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>

Solution

  • Just declare your scss details as shown below.If you do so it'll get the precedence of styles over the default ionic once.

    .scss

    .md,
.ios,
.wp {
 page-home {
   ion-header {
        height: 40px;//by default 56px
    }
 }
}