How to change height of the header?

ionic-v1
1

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?

2 
.bar-header{
  height: 80px;
}

.has-header{
  top:80px;
}
1 Like
3

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?

4

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

.bar-header{
  padding-top:40px ;
  height: 80px 
}

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

.has-header{
  top:80px 
}

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

2 Likes
5

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.

2 Likes