Ionic View - Status bar overlap

Ionic Framework ionic-v3
1

Hi all,

when loading my app in Ionic View my my header goes underneath the status bar, any ideas how to rectify this so it sits below?

image
IMG_7505.PNG1242×315 164 KB

2

What is the code used to create this header?

3

I have fixed the issue with StatusBar.overlaysWebView(false);

However I now have this issue whereby the back button is off centre, is fine within the browser but in ionic view and emulator it does this
image

Header HTML is

  <ion-navbar>
	<img class="logo" src="images/logo.png" alt="">
  </ion-navbar>

</ion-header>

and styling

.header {
	text-align: center;
	border-bottom: 1px solid map-get($colors, primary);
	min-height: 57px;
	background: #fff;

	.toolbar-background-md {
		background: #fff;
	}

	.logo {
		position: absolute;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%);
	    width: 160px;
	}

	.back-button.back-button {
		vertical-align: middle;
	}

	&:after {
		display: none;
	}

}
1 Like
4

So you increased the height of the header to fit a bigger picture? Is that intentional?