How to change height of the header?


How can I change the height of the header? seems to be a lot of things (css) that has to be changed to not break it. Has someone successfully changed the height? what classes/id’s do I need to change?

  height: 80px;


Wrong images scale on device

hmm, but that will make the header title and buttons (like menu button) text to not be vertically centered, and not 100% height. Do you know how to fix that?

Adjust height of the header

The title is absolutely positioned so you can adjust the top value for that and adding some padding will fix the button.

  padding-top:40px ;
  height: 80px 

.bar-header h1.title{


Note that you will need to adjust these values to fit your size changes.


Yes, this is from a while back, but for anyone else reading this/finding it through Google, I would argue that this is not the correct way to go. Use the SASS variables to do this properly.

$bar-height: 80px

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

However, if you cant use the SASS files, then you may be forced to ‘hack/over-ride’ it as suggested above.
But I would highly recommend doing it using the SASS variables.