Ionic 5 collapsible header replace logo

I have the collapsible header working, but I can’t seem to figure out how to replace/hide an image in the header when scrolling. Here’s what I have…

The toolbar at the top displays the menu toggle on the left. I would like to display a logo image in the toolbar until the user scrolls, then replace the image with the title that is in the collapsible header.

What happens now is that when I scroll, the collapsible header displays in the toolbar at the top, but it overlays the logo image. I tried adding a collapse=“false” to both an img and ion-img tag, but neither works.

Does anyone know how to achieve this? Thanks.

I think this might work…however, it doesn’t work when it’s in the global.scss stylesheet, only the stylesheet local to the page. Not sure why. Anyone have a better option?

ion-header {
  ion-img {
    visibility: hidden;
  }

  &.header-collapse-condense-inactive {
    ion-img {
      visibility: visible;
    }
  }
}

Hi,
would you please share the code for the collapse,
am currently want to do the same thing…
kinda straggle with this
thanks

The ion-header code is exactly what is in the documentation. The only thing I did was substitute my image for ion-title in the top ion-header block.

1 Like