# Logo exceeds header gets cut!

**URL:** <https://forum.ionicframework.com/t/logo-exceeds-header-gets-cut/111597>\
**Category:** ionic-v3\
**Created:** [November 9, 2017, 3:14pm UTC](https://forum.ionicframework.com/t/logo-exceeds-header-gets-cut/111597 "2017-11-09T15:14:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cracker90](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/cracker90/32/114832_2.png) [@cracker90](https://forum.ionicframework.com/u/cracker90)\
**Post date:** [November 9, 2017, 3:14pm UTC](https://forum.ionicframework.com/t/logo-exceeds-header-gets-cut/111597/1 "2017-11-09T15:14:03Z")

</div>

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 :  
 ![](https://global.discourse-cdn.com/ionicframework/original/3X/6/3/63a08eecde8c8529b803b3c810cc316b0c181082.jpg)  
i am using the menu template.  
is it possible to have a header like that in ionic ?

---

<div class="post-metadata">

**Author:** ![pliablepixels](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/pliablepixels/32/112372_2.png) [@pliablepixels](https://forum.ionicframework.com/u/pliablepixels)\
**Post date:** [November 9, 2017, 4:08pm UTC](https://forum.ionicframework.com/t/logo-exceeds-header-gets-cut/111597/2 "2017-11-09T16:08:23Z")

</div>

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/](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:

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

```

where

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

```

---

<div class="post-metadata">

**Author:** ![cracker90](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/cracker90/32/114832_2.png) [@cracker90](https://forum.ionicframework.com/u/cracker90)\
**Post date:** [November 10, 2017, 2:13pm UTC](https://forum.ionicframework.com/t/logo-exceeds-header-gets-cut/111597/3 "2017-11-10T14:13:43Z")

</div>

Hello,

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

best regards!!!

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 10:06pm UTC](https://forum.ionicframework.com/t/logo-exceeds-header-gets-cut/111597/4 "2021-07-19T22:06:14Z")

</div>