Ionic subheader bar overlapping content

In a view with header and subheader, subheader content overlaps the contents of the view.

  • Header in slide menu

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left" ng-hide="$exposeAside.active"></button>
      </ion-nav-buttons>
    </ion-nav-bar>
    
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
    

  • Subheader in a view

    <ion-header-bar align-title="center" class="bar bar-subheader custom bar-energized" ng-if="datos.subTitulo"> <div class="buttons"> <a class="ion-chevron-left" href="#/app/ranking/ubicacion/{{datos.divAnt}}" ng-if="datos.divAnt"></a> </div> <h2 class="subtitle">{{datos.subTitulo}}</h2> <div class="buttons"> <a class="ion-chevron-right" href="#/app/ranking/ubicacion/{{datos.divSig}}" ng-if="datos.divSig"></a> </div> </ion-header-bar>

Dvis buttons in subheader overlapping content, h2 show 100%. Something is missing in this code? Thanks

image view

[EDIT] Rewrote the code to suit my needs: subheader smaller than the header with two links in the corners and a title.

<ion-header-bar align-title="center" class="bar-subheader subheader_custom bar-energized">
    <div class="button button-clear"> 
        <a class="icon ion-ios-arrow-back blanco" href="#/app/ranking/ubicacion/{{datos.divAnt}}" ng-if="datos.divAnt"></a>
    </div>
    <div class="h2 title title_custom">{{datos.subTitulo}}</div>
    <div class="button button-clear"> 
        <a class="icon ion-ios-arrow-forward blanco" href="#/app/ranking/ubicacion/{{datos.divSig}}" ng-if="datos.divSig"></a>
    </div>
</ion-header-bar>

Add this css:

.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;
}

Even buttons are not in line with the subheader title. Any ideas?

New status: enter image description here

Make sure that the content view knows it needs to leave space for the subheaders by adding the CSS class has-subheader:

<ion-content class="has-header has-subheader">
</ion-content>

See http://ionicframework.com/docs/components/#subheader

You can easily change the height of the subheader, footer, and subfooter if you are using SASS with Ionic. If you want a 70px tall subheader simply add $bar-subheader-height: 70px; to your ionic.app.scss file. Your scss file should look something similar to:

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

$bar-subheader-height: 70px;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

Check out the www/lib/ionic/scss/_variables.scss file for some of the other things you can change easily.

Here are instructions for setting up sass with ionic and here is a quick tutorial.