title: Ionic subheader bar overlapping content
body: <p>In a view with header and subheader, subheader content overlaps the contents of the view.</p>
  
  <ul>
  <li><p>Header in slide menu</p>
  
  <p>
      
        </p>
  
  <pre><code>  &lt;ion-nav-buttons side="left"&gt;
      &lt;button class="button button-icon button-clear ion-navicon" menu-toggle="left" ng-hide="$exposeAside.active"&gt;&lt;/button&gt;
    &lt;/ion-nav-buttons&gt;
  &lt;/ion-nav-bar&gt;
  
  &lt;ion-nav-view name="menuContent" animation="slide-left-right"&gt;&lt;/ion-nav-view&gt;
  </code></pre>
  
  <p></p></li>
  <li><p>Subheader in a view</p></li>
  </ul>
  
  <pre><code>&lt;ion-header-bar align-title="center" class="bar bar-subheader custom bar-energized" ng-if="datos.subTitulo"&gt;
        &lt;div class="buttons"&gt;
           &lt;a class="ion-chevron-left" href="#/app/ranking/ubicacion/{{datos.divAnt}}" ng-if="datos.divAnt"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;h2 class="subtitle"&gt;{{datos.subTitulo}}&lt;/h2&gt;
        &lt;div class="buttons"&gt;
           &lt;a class="ion-chevron-right" href="#/app/ranking/ubicacion/{{datos.divSig}}" ng-if="datos.divSig"&gt;&lt;/a&gt;
        &lt;/div&gt;
  &lt;/ion-header-bar&gt;
  </code></pre>
  
  <p><code>Div</code> buttons in <code>subheader</code> overlapping content, <code>h2</code> show 100%.
  Something is missing in this code? Thanks</p>
  
  <p><img src="https://i.stack.imgur.com/5yRvv.png" alt="image view"></p>
  
  <p>[EDIT]
  Rewrote the code to suit my needs: subheader smaller than the header with two links in the corners and a title.</p>
  
  <pre><code>&lt;ion-header-bar align-title="center" class="bar-subheader subheader_custom bar-energized"&gt;
      &lt;div class="button button-clear"&gt; 
          &lt;a class="icon ion-ios-arrow-back blanco" href="#/app/ranking/ubicacion/{{datos.divAnt}}" ng-if="datos.divAnt"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="h2 title title_custom"&gt;{{datos.subTitulo}}&lt;/div&gt;
      &lt;div class="button button-clear"&gt; 
          &lt;a class="icon ion-ios-arrow-forward blanco" href="#/app/ranking/ubicacion/{{datos.divSig}}" ng-if="datos.divSig"&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/ion-header-bar&gt;
  </code></pre>
  
  <p>Add this css:</p>
  
  <pre><code>.has-subheader {
      top: 70px;
  }
  
  .bar-subheader.subheader_custom {
      display: block;
      height: 26px;
      top: 44px;
  }
  .title.title_custom {
      font-size: 16px;
      font-weight: 300;
      height: 20px;
      left: 0;
      line-height: 20px;
      margin: 2px 10px 2px 10px;
      min-width: 24px;
      overflow: hidden;
      position: absolute;
      right: 0;
      text-align: center;
      text-overflow: ellipsis;
      top: 0;
      white-space: nowrap;
      z-index: 0;
  }
  </code></pre>
  
  <p>Even buttons are not in line with the subheader title. Any ideas?</p>
  
  <p>New status:
  <img src="https://i.stack.imgur.com/X4uZ9.png" alt="enter image description here"></p>