How to offset Android Tabs bar down when having larger multi-line title Bar?

ionic-v1
1

We’re struggling to move the Android tabs bar further down the screen when we increase the height of the Ionic title bar.

We’ve had to increase the height of the title bar from 44px to 55px to accommodate a two line title. For historical reasons we can’t use SASS as we have a lot of CSS stuff we’d need to convert so before anybody asks, SASS is a non-starter for now.

We’ve increased the title bar using the following code

.bar-header{
    padding-top:20px ;
    height: 55px
}

.bar-header h1.title{
    top:20px;
}

.has-header{
    top:55px
}

.two-line-title-top {
    color: gray;
    display: block;
    line-height: 0.6em; /*0.6em */
    font-size: 12px;
    margin: 8px 0;
}

.two-line-title-bottom {
    display: block;
    line-height: 1em;
    font-size: 19px;
    margin: 8px 0;
}

On IOS this looks pretty good, 55px allows the white space to show and stops the titles looking crowded.

The title bar also looks pretty good on Android, however the larger height title bar crashes into the Android tabs bar that is directly underneath the main title bar. See the picture below: I’ve circled the area where it collides.

image
AndroidCrash.png450×800 215 KB

I’m sure there’s a simple css style to move the Android tabs bar down so it doesn’t collide.

We have searched and found lots of requests to move the Android bar to the bottom which we don’t want to do as it (or used to) conflict with the keyboard plugin.

Any help or suggestions welcomed.

Thanks

Rob