title: Change the size of header - IONIC 2
body: <p>I need to resize the header, how can I do it? I tried with a few css styles but it did not work.</p>
  
  <p><a href="https://i.stack.imgur.com/gOH8l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gOH8l.png" alt="I want to achieve the small one"></a></p>
  
  <p>I want to achieve the small one</p>
  
  <p>Thanks!</p>
  
  <p>edit: This is my code, hope this help...</p>
  
  <p>thanks again and let me know if you need more details</p>
  
  <p>............................................................................................................</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;
        &lt;img alt="logo" class="logo" height="20" src="../assets/img/image.png"&gt;
      &lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
    &lt;ion-toolbar class="toolbar-header" color="dark"&gt;
      &lt;ion-title&gt;
            &lt;p  class="title" text-wrap&gt;Events&lt;/p&gt;
      &lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;!--End Header--&gt;
  
      &lt;ion-content padding&gt;
        &lt;ion-grid&gt;
          &lt;ion-row class="header-row"&gt;
            &lt;ion-col class="header-col" col-1&gt;
              EVENTS
            &lt;/ion-col&gt;
            &lt;ion-col class="header-col" col-2&gt;
              ORIGIN
          &lt;/ion-col&gt;
            &lt;ion-col class="header-col" col-2&gt;
              DESTINATION
          &lt;/ion-col&gt;
            &lt;ion-col class="header-col" col-1&gt;
              ERROR
            &lt;/ion-col&gt;
            &lt;ion-col class="header-col" col-2&gt;
              FIRST EVENT
            &lt;/ion-col&gt;
            &lt;ion-col class="header-col" col-2&gt;
              LATEST EVENT
            &lt;/ion-col&gt;
          &lt;/ion-row&gt;
        &lt;/ion-grid&gt;
      &lt;/ion-content&gt;</code></pre>
  </div>
  </div>
  </p>