Logo exceeds header gets cut!


#1

Hello,
i been trying to add my logo in the header of my newly created app, but i couldn’t as the logo exceeds the header height, i been playing around with the z-index on the browser inspector but it gets cut as i position it on the bottom border of the header, here is what i want to do :

i am using the menu template.
is it possible to have a header like that in ionic ?


#2

Oops sorry. I just saw your image - looks like you want a floating menu button at the top center. In that case, take a look at Ion Fab buttons https://ionicframework.com/docs/api/components/fab/FabButton/

Old Answer - wrong

You should make sure the logo is within the ion-header size, so something like this:

<ion-title>
   <img  class="mylogo"  src="path/logo.png" > 
</ion-title>

where

.mylogo {
   height:42px; // or smaller I think logo header height is 44
}

#3

Hello,

Thank you for your reply that’s what i was looking for, i really appreciate it !!!

best regards!!!