How to make image on ionic navbar still visible while it overflow

Question

I have a design from Photoshop. I want to implement that to my ionic project, but I don't know how. It's hard to implement the css style to make logo still visible when it overflow the navbar container.

My project looks like this:

My Photoshop design:

---

And my CSS code

.brand-image {
margin: auto;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
width: 40%; }

and the HTML

<ion-header>
  <ion-navbar>
    <img src="/assets/imgs/brand-image.svg" class="brand-image">
  </ion-navbar>
</ion-header>

Answer 1

将以下css添加到 app.scss

ion-navbar.toolbar {
    overflow: visible;
    contain: none;
}