Custom subheader over ion-content

Hi! I have this subheader in a template:

<ion-header-bar class="bar bar-subheader" style="{height: auto;}>
    <div class="row">
      <div class="col col-25">
        <img src="img/something.jpg" style="{width: inherit;}"></img>
      <div class="col">
    <button class="button button-block button-positive">
      Do Something

The subheader shows an image, some data and a button. Of course it gets higher than the normal subheader (using height: auto).

The problem is that I can’t get the ion-content under that ‘thicker’ subheader. I’ve tried

<ion-content has-header="true" has-subheader="true" has-tabs="true">

and things similar, but no luck.

What is the best way to style subheaders higher, letting the ion-content below it? Thanks in advance!

1 Like

If you put your subheader outside of your content, it should remain sticky. Is that not what’s happening?

I want the subheader to be sticky and want the content to be under the subheader (naturally). I don’t know if I’m being clear. Thanks for the quick reply!

If the subheaders height isn’t a set value, it will overlap the content. The class has-subheader just adjusts the top position value of ion-content.

1 Like

Thanks! Following that codepen, I managed to do what I wanted by putting the following in my styles.css:

  height: 162px !important;
  top: 206px !important;

but is it correct to override their values?
does this mean in every device, i would have to set different values for them?

I am wondering this as well. How can I manage this so it accommodates for different devices.

and how to account for a variable header size?

Post 1.0 we want to move everything to flex-box to make this possible.
You could start working on something going in that direction.


Here’s the equivalent in SCSS that is a bit easier to work with. Note, $bar-height is an Ionic Framework variable in _variables.scss:

.bar-subheader {
	height: $newHeight !important;

.has-subheader {
	top: $bar-height + $newHeight !important;