Ion header showing whitespace pre-collapse

Ionic Framework Ionic React
1

Hi! I may be misunderstanding Ion headers and collapsing but my assumption was:

  • Ion header pre-collapse is larger
  • Ion header post-collapse is thinner and more manageable

I’m having an issue where my post collapse header is appearing as whitespace in the DOM. I can’t figure out how to hide it until the collapse happens. Am I totally misunderstanding how this works?

This is pre-collapse - whitespace is visible at the top

1

This is post collapse – looks correct

2

Code I’m using

    <IonPage>
      <IonHeader color="primary" translucent="true">
        <IonToolbar color="primary">
          <IonTitle size="medium">Settings</IonTitle>
          <HeaderBar name="Scores page" />
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen="true">
        
        <IonHeader collapse="condense">
          <IonToolbar color="primary">
            <IonTitle size="large">Settings</IonTitle>
            <HeaderBar name="Scores page" />
          </IonToolbar>
        </IonHeader>

        <TeamMenu name="Team" />
        <TeamMenu name="Team" />
        <TeamMenu name="Team" />
        <TeamMenu name="Team" />
      </IonContent>
    </IonPage>

Any help is appreciated! I’ve tried quite a few things but I’m new to Ionic.