Ionic 6 - Add image between the ion-button and the ion-title in the ion-toolbar

Hello!

I’m trying to add an auto-adaptive image between the ion-button (menu button) and the ion title that I placed on the right within my ion-toolbar but I’m stuck with scss and the documentation I’ve found on the Internet.
Basically Ii would like to achieve this:

This is the way I’ve structured my ion-toolbar:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
    <ion-title class="ion-text-right">Contacts</ion-title>
  </ion-toolbar>
</ion-header>

And this is the css:

ion-toolbar {
  --background: none;
  background: url("../../../../assets/imgs/MyLogo.svg") no-repeat fixed
    center;
  background-size: contain;
}

Actually the image takes the whole toolbar space and it is not contained between the menu button and the title.

Can you help please?

1 post - 1 participant

Read full topic