Change ion-toolbar height when inside ion-header

Is there a way to change the ion-toolbar height when placed inside a ion-header? I want to add a 2nd toolbar in the header to place the current user’s info, some status icons, etc, but I want that 2nd toolbar to be aproximatelly 50% of the normal toolbar height. I’ve tried with height and max-height and the toolbar’s height is actually affected, but it stills apply some kind of padding or margin to the elements included in the toolbar (despite having padding: 0px and margin: 0px).

This is the markup with no styling:

<ion-header>
  <ion-toolbar color="light">
  	<ion-buttons slot="start">
  		<img src="/assets/logo.png" class="app-header-logo"/>
  	</ion-buttons>
    <ion-buttons slot="end">
    	<ion-title>{{caption}}</ion-title>       
    </ion-buttons>    
    <ion-buttons slot="end">
      <ion-button (click)="showOptionsMenu()">
          <ion-icon slot="icon-only" name="more"></ion-icon>
      </ion-button>
    </ion-buttons>    
  </ion-toolbar>

  <ion-toolbar color="dark">
    <ion-buttons slot="end">
      <ion-text style="font-size: 80%;" color="light" >(full user name)</ion-text>
      <ion-icon style="margin-left: 10px;margin-right: 10px;" color="light" slot="icon-only" size="small" name="contact"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

And this is what that looks like:
43%20AM

When I applied this styling to the 2nd toolbar:

  <ion-toolbar color="dark" style="max-height: 25px;padding: 0px !important;margin: 0px !important;">
    <ion-buttons slot="end">
      <ion-text style="font-size: 80%;" color="light" >(full user name)</ion-text>
      <ion-icon style="margin-left: 10px;margin-right: 10px;" color="light" slot="icon-only" size="small" name="contact"></ion-icon>
    </ion-buttons>
  </ion-toolbar>

This is the result:
29%20AM

Any ideas?

TIA

1 Like