Navbar ion-title align center for android

Ionic Framework ionic-v3
21

Blockquote
.toolbar-content{
position: absolute;
width: 100%;
text-align: center;
pointer-events: none;
}
Blockquote

This also has a problem because of pointer-events. It prevents other buttns in toolbar and ion-segment clicked.
Rather adding this

.back-button{z-index:5;}

to this

position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
text-align: center;
}
type or paste code here

is much better

2 Likes
23

Agreed! :slightly_smiling_face: even adding just

.back-button {
  z-index: 1;
}

pushes the back button in front of the title bar, without any other side-effects!

24

It works, simple & short :slight_smile:

25

with this the button still clickable and in the same time the title is centered.
just change the ion-header button, .back-button to what you want to ably it for.

ion-header button, .back-button {
  position: absolute !important;
  z-index: 5;
}

in this Scss i changed it for my menu and back-button.
write it in any page(SCSS) but not inside its {} so that it is going to be global (for all pages)

3 Likes
26

This code absolutely working fine, but after applied this code back button is not working
Can you pls give me any other solutions

27

Add

.back-button.show-back-button {
z-index: 4 !important;
}