# Header component

**URL:** <https://forum.ionicframework.com/t/header-component/105167>\
**Category:** ionic-v3\
**Created:** [September 13, 2017, 2:03am UTC](https://forum.ionicframework.com/t/header-component/105167 "2017-09-13T02:03:25Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![mateuspaegle](https://avatars.discourse-cdn.com/v4/letter/m/ac8455/32.png) [@mateuspaegle](https://forum.ionicframework.com/u/mateuspaegle)\
**Post date:** [September 13, 2017, 2:03am UTC](https://forum.ionicframework.com/t/header-component/105167/1 "2017-09-13T02:03:25Z")

</div>

Hi guys!

I’m having a problem regarding componentization of the ion-navbar, on Android it renders normally, but in ios it does not take into account the status bar … Below follows the codes and image of how it stays in ionic lab.

Note that the status bar in ios is above the header, not giving a space.

 ![Screenshot from 2017-09-12 22-55-22](https://global.discourse-cdn.com/ionicframework/original/3X/b/8/b8db41aadce9af9c3e82374caa8a856a2e5f4688.png)

Header component

```auto
<ion-navbar>
  <ion-title>EventDream</ion-title>
  <ion-buttons end>
    <button ion-button icon-only (click)="showActionSheet()">
      <ion-icon name="more"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

```

Using

```auto
<ion-header>
  <events-header></events-header>
</ion-header>

```

anybody???

---

<div class="post-metadata">

**Author:** ![SigmundFroyd](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sigmundfroyd/32/111604_2.png) [@SigmundFroyd](https://forum.ionicframework.com/u/SigmundFroyd)\
**Post date:** [September 13, 2017, 2:18am UTC](https://forum.ionicframework.com/t/header-component/105167/2 "2017-09-13T02:18:17Z")

</div>

Does it work properly when you put your header component template directly into your page?

I’m wondering if this is an instance of Ionic expecting certain elements to be direct children of other elements.

---

<div class="post-metadata">

**Author:** ![mateuspaegle](https://avatars.discourse-cdn.com/v4/letter/m/ac8455/32.png) [@mateuspaegle](https://forum.ionicframework.com/u/mateuspaegle)\
**Post date:** [September 13, 2017, 2:23am UTC](https://forum.ionicframework.com/t/header-component/105167/3 "2017-09-13T02:23:18Z")

</div>

But this header will be used in more than 1 page, I do not want to be replicating code

---

<div class="post-metadata">

**Author:** ![SigmundFroyd](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sigmundfroyd/32/111604_2.png) [@SigmundFroyd](https://forum.ionicframework.com/u/SigmundFroyd)\
**Post date:** [September 13, 2017, 2:56am UTC](https://forum.ionicframework.com/t/header-component/105167/4 "2017-09-13T02:56:26Z")

</div>

Of course. I just meant for testing purposes.

---

<div class="post-metadata">

**Author:** ![mateuspaegle](https://avatars.discourse-cdn.com/v4/letter/m/ac8455/32.png) [@mateuspaegle](https://forum.ionicframework.com/u/mateuspaegle)\
**Post date:** [September 13, 2017, 3:10am UTC](https://forum.ionicframework.com/t/header-component/105167/5 "2017-09-13T03:10:15Z")

</div>

right, so when I use it without being inside the component, repeating the code, it works normally.

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [September 13, 2017, 8:22am UTC](https://forum.ionicframework.com/t/header-component/105167/6 "2017-09-13T08:22:38Z")

</div>

I think I tried that before and saved this in the back of my mind: You unfortunately can’t wrap ion-navbar in a component because the CSS path changes and some stuff doesn’t get applied.

---

<div class="post-metadata">

**Author:** ![mateuspaegle](https://avatars.discourse-cdn.com/v4/letter/m/ac8455/32.png) [@mateuspaegle](https://forum.ionicframework.com/u/mateuspaegle)\
**Post date:** [September 13, 2017, 12:10pm UTC](https://forum.ionicframework.com/t/header-component/105167/7 "2017-09-13T12:10:58Z")

</div>

I came to think of this possibility … What do you suggest I do?

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [September 13, 2017, 12:20pm UTC](https://forum.ionicframework.com/t/header-component/105167/8 "2017-09-13T12:20:17Z")

</div>

Copy paste the code to all the places where you are currently using that component.

---

<div class="post-metadata">

**Author:** ![crkvend](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@crkvend](https://forum.ionicframework.com/u/crkvend)\
**Post date:** [September 13, 2017, 12:51pm UTC](https://forum.ionicframework.com/t/header-component/105167/9 "2017-09-13T12:51:48Z")

</div>

@Sujan12 That is a horrible solution. Rather, add a simple row of css and manually add the padding to your component. I don’t remember the appropriate class name right now, but just inspect the DOM and you’ll see.

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [September 13, 2017, 1:03pm UTC](https://forum.ionicframework.com/t/header-component/105167/10 "2017-09-13T13:03:13Z")

</div>

@crkvend Feel free to create a tutorial that covers all edge cases and fully replaces the normal functionality and post it here somewhere, then I can link to it in the future instead of suggesting a solution that just works right now.

---

<div class="post-metadata">

**Author:** ![crkvend](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@crkvend](https://forum.ionicframework.com/u/crkvend)\
**Post date:** [September 13, 2017, 1:38pm UTC](https://forum.ionicframework.com/t/header-component/105167/11 "2017-09-13T13:38:41Z")

</div>

There is really no tutorial needed for this. Just try adding something like this to your global css:

```auto
.platform-ios ion-navbar ion-title {
  padding-top: 20px;
}

```

I have an ion-navbar with tons on functionality, placed on about 20 pages. Copying the navbar functionality to every single page that uses it would be a nightmare.

---

<div class="post-metadata">

**Author:** ![mateuspaegle](https://avatars.discourse-cdn.com/v4/letter/m/ac8455/32.png) [@mateuspaegle](https://forum.ionicframework.com/u/mateuspaegle)\
**Post date:** [September 13, 2017, 3:05pm UTC](https://forum.ionicframework.com/t/header-component/105167/12 "2017-09-13T15:05:36Z")

</div>

I already had this idea, I will try directly in the class you commented … Thanks for the help!

---

<div class="post-metadata">

**Author:** ![mateuspaegle](https://avatars.discourse-cdn.com/v4/letter/m/ac8455/32.png) [@mateuspaegle](https://forum.ionicframework.com/u/mateuspaegle)\
**Post date:** [September 13, 2017, 3:53pm UTC](https://forum.ionicframework.com/t/header-component/105167/13 "2017-09-13T15:53:06Z")

</div>

this is markup I used

```auto
events-header {
  ion-navbar.toolbar.toolbar-ios.statusbar-padding {
    padding-top: 20px;

    div.toolbar-content.toolbar-content-ios {
      ion-title.title.title-ios {
        div.toolbar-title.toolbar-title-ios {
          padding-top: 20px;
        }
      }
    }
  }
}

```