iOS: Can't change height of ion-header-bar

Problem: On iOS, my custom CSS to change the height of the <ion-header-bar> directive to fit a logo doesn’t work. The header seems to return to its default height of 44px and the logo overlaps the content below it.

Left: Screenshot of actual iDevice, logo in <ion-header-bar> overlaps <ion-content>.
Right: Screenshot of how it looks in a web browser, in the iOS emulator, and on Android. The logo stays within the <ion-header-bar> element.

Here is the CSS I’m using on the <ion-header-bar> which has the classes of .bar and .bar-header:

.has-header {
  top: 75px;
.bar {
  height: 75px;
.bar-header .title {
  margin-top: 10px;
  height: 74px;
  line-height: 75px;
.back-arrow {
  font-size: 35px;

And here is the relevant HTML, all contained in an <ion-view>:

  <div class="buttons">
    <a href="#/login">
      <button class="button button-clear">
        <i class="ion-arrow-left-c back-arrow"></i>
        <!-- Removed "Sign out" text shown in screenshots -->
  <h1 class="title">
    <img class="title-image" src="img/logo.svg" height="60" alt="SchedU Logo">
<ion-content has-header="true">
  <ion-list class="class-list">
    <!-- Content -->

As noted in the HTML, the “← Sign Out” link has changed to just being a large “←” icon.

Here is a Plunker, although it may not help much because the header renders fine in it.

I fixed my own problem! Woo!

Here’s the deal: Ionic applies platform-specific CSS classes on the <ion-header-bar> directive on iOS7. I used the Safari Web Inspector to look at the CSS being applied to the app running on an iDevice, and found the below classes. I modified their values and sure enough my problem was fixed!

/* iOS Specific Overrides to fix logo overlap */
.platform-ios7.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
  margin-top: 25px;
.platform-ios7.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
  height: 90px;
.platform-ios7.platform-cordova:not(.fullscreen) .has-header {
  top: 90px;

This should be documented somewhere, that was one of the most frustrating bugs I’ve ever had to figure out with Ionic. I wish I had thought of the Safari Web Inspector sooner!

To avoid these issues in the future, I would recommend using the Sass feature, and simply change the specific variable to fit your need, in this case, $bar-height.

1 Like

Great idea. I haven’t yet taken the time to learn Sass, but I will if it will help with Ionic development. Any link suggestions to get me started?

These resources should get you started:

1 Like

Hello, i’m trying to override $bar-height only for some specific views with large headers.
Everything that i tried so far doesn’t work.
Any insights on how to override $bar-height for specific view classes or id(s) ?

not that hard, something like this should do:

.bar.large-header {
$bar-height: 70px;
@extend .bar;

I could solve my problems using css like this: :sunglasses:

	height: 78px !important;
	background-color: #40414d;	
  height: 78px !important;
  background-color: #40414d;

	height: 78px !important;