Reduce ion-header-bar height


#1

I’d like to reduce the height of the header bar to just 5px tall (it will be used to contain a progress bar). I’ve tried setting this with the CSS below. It does reduce the height, however there is still vertical white space between the bottom of the header and my ion-slide-box below it. Where am I going wrong? Thanks.

.bar-header {
  height: 5px !important;
  line-height: 5px !important;
}

#2

The ion-content automatically gets the has-header class applied to it, with the property top equal to the height of the header. You need to override this class:

.has-header {
  top: 5px !important;
}

#3

Thanks. I can’t seem to reduce it less than 10 pixels. It also makes the view that would normally position below, appear behind. Here’s the CSS:

 .bar-header {
   height: 2px !important;
 }
 
 .has-header {
   top: 2px !important;
 }

#4

Ah, that’s because the bar class has padding: 5px on it. You can remove the padding:

.bar-header {
  height: 5px !important;
  padding: 0 !important;
}

Also, if you don’t want to use !important you can always give the header a custom class and override it that way. i.e.

HTML

<ion-header-bar class="bar-positive custom-bar-header"></ion-header-bar> 

CSS

.bar-header.custom-bar-header {
  height: 5px;
  padding: 0;
}

I’m not sure why it would position the view behind, could you create a codepen showing your markup? Here is one I threw together for this: http://codepen.io/brandyshea/pen/vNGBNx?editors=110