# iPhone X Navbar Position

**URL:** <https://forum.ionicframework.com/t/iphone-x-navbar-position/120931>\
**Category:** ionic-v3\
**Created:** [February 8, 2018, 5:16pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931 "2018-02-08T17:16:51Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![hagan10](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hagan10/32/118397_2.png) [@hagan10](https://forum.ionicframework.com/u/hagan10)\
**Post date:** [February 8, 2018, 5:16pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/1 "2018-02-08T17:16:51Z")

</div>

**How can I move the purple bar down? There is a title I was to display right in the center - it’s currently barely visible in white text.**

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/7/7/776c3329d50f86ecfac9534e1401489a902d62d1.jpg)

![image](https://global.discourse-cdn.com/ionicframework/original/3X/5/f/5f06740d2fdbde7f3f99fa15abc0298b1e24d270.png)

![image](https://global.discourse-cdn.com/ionicframework/original/3X/1/3/13b0fa37707b6e81c2d2ce3ba76b4701b2baf902.png)

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/f/2/f221047d35c9977516293ad19e2e783f3b135a4d.png)

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/e/8/e8ed3c84630c5319ca35a0440b3e62c4480a96af.jpg)

**Already tried:**

- [https://github.com/ionic-team/ionic/issues/12952](https://github.com/ionic-team/ionic/issues/12952)
- [https://blog.ionicframework.com/ios-11-checklist/](https://blog.ionicframework.com/ios-11-checklist/)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [February 8, 2018, 8:17pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/2 "2018-02-08T20:17:06Z")

</div>

I’m just missing one information, which `ionic-angular` version are you using? Could you print out your `ionic info` results? I guess it need ionic-angular \>= 3.7

Also how does your page looks like, do you have a `ion-header` in your page? If not, try with even an empty one `<ion-header></ion-header>`

---

<div class="post-metadata">

**Author:** ![hagan10](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hagan10/32/118397_2.png) [@hagan10](https://forum.ionicframework.com/u/hagan10)\
**Post date:** [February 9, 2018, 5:10pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/3 "2018-02-09T17:10:20Z")

</div>

**ionic info**

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/e/f/ef6f433ea6ce2d4e96d2f556e729ae7dd2c01b42.jpg)

**ng-version**  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/b/0/b0b302240e20d2c3db567a0e4e62dde1ae053970.png)

**title bar in app.html**  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/d/1/d1399aa6460ab73cf729a3da0c503c698c35d388.png)

**Looks good on browser & Android emulator - but not in iPhone X emulator**

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/3/b/3be96b83613f6588d2163c92f28a1f52992978b5.jpg)

---

<div class="post-metadata">

**Author:** ![MattE](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/matte/32/66712_2.png) [@MattE](https://forum.ionicframework.com/u/MattE)\
**Post date:** [February 9, 2018, 5:22pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/4 "2018-02-09T17:22:54Z")

</div>

Update to the latest version of ionic-angular (3.9.2).  
Version 3.8.0 introduced more iPhone X compatibility  
–\> [https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [February 9, 2018, 6:28pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/5 "2018-02-09T18:28:32Z")

</div>

I was about to say to same things, thx. Exactly, you have to upgrade ionic-angular.

Pay attention to the changelog, you will have to upgrade angular itself too.

But no worries to have, not a difficult update

---

<div class="post-metadata">

**Author:** ![hagan10](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hagan10/32/118397_2.png) [@hagan10](https://forum.ionicframework.com/u/hagan10)\
**Post date:** [February 13, 2018, 5:32pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/6 "2018-02-13T17:32:29Z")

</div>

hmmm, still getting the same result after updating… am I missing something? @MattE @reedrichards

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/4/8/4851a3c4bbaa1deebf529b9a3bcdbe920870af85.png)

![image](https://global.discourse-cdn.com/ionicframework/original/3X/2/6/26b01cb02c06951ec9b7b733483874b32b7ad01d.png)

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/5/d/5d53a209d9f09e927dded8ee39321bdad7b1eb39.png)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [February 13, 2018, 7:10pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/7 "2018-02-13T19:10:27Z")

</div>

Mmmh

1. maybe trying to `ionic remove/add platform ios` again? maybe a plugin wasn’t copied correctly…

2. I’ve got `cordova-plugin-statusbar` 2.4.1 not 2.4.2-dev…did something broke in this dev version?

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [February 13, 2018, 7:11pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/8 "2018-02-13T19:11:43Z")

</div>

Oh wait…something else. You said you have an `ion-header` … in your app.html, I just notice that now. Would you try to remove it from there and add it in your pages?

I’ve got `ion-header` in my pages

---

<div class="post-metadata">

**Author:** ![hagan10](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hagan10/32/118397_2.png) [@hagan10](https://forum.ionicframework.com/u/hagan10)\
**Post date:** [February 16, 2018, 7:31pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/9 "2018-02-16T19:31:06Z")

</div>

@reedrichards Well, actually, I just have 1 page - it’s just app.html - I don’t have any additional pages… (nothing in the pages folder).

I made this app by just adding to Ionic’s side menu template (CLI command: ionic start MyIonicProject sidemenu). It seems to be spaced properly there - so I’ll compare my code…

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/c/f/cf280fe36dad3df314bea0e8e3d368af8227881e.jpg)

---

<div class="post-metadata">

**Author:** ![beck24](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/beck24/32/112174_2.png) [@beck24](https://forum.ionicframework.com/u/beck24)\
**Post date:** [February 17, 2018, 6:57am UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/10 "2018-02-17T06:57:07Z")

</div>

I’m facing a similar issue, upgraded my app from previous versions. Now on latest ionic-angular and followed all the iphone X checklists but it still insists on using the safe space. If you find a solution before I get a chance to deep dive on it can you please post?

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [February 17, 2018, 7:38am UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/11 "2018-02-17T07:38:20Z")

</div>

Could you show the content of your `app.html`?

---

<div class="post-metadata">

**Author:** ![hagan10](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hagan10/32/118397_2.png) [@hagan10](https://forum.ionicframework.com/u/hagan10)\
**Post date:** [February 17, 2018, 8:38am UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/12 "2018-02-17T08:38:27Z")

</div>

```auto
<!-- THE HOMEPAGE -->

  <!-- The <ion-navbar> is a template for the navigation bar on this page. As we navigate to this page, the button and title of the navigation bar transition in as part of the page transition. -->
 <!-- <ion-navbar style="height: 90px"> -->
  <ion-navbar>
<!-- <ion-title style = "position: relative; top: 20px" >MyWestern</ion-title> -->
    <ion-title>MyWestern</ion-title> 
  </ion-navbar>

<!-- <ion-content class="menu-content"> -->
    <!-- this is just determining if the info inside the sidebar is ready to view -->
    <ion-list *ngIf="sidebarInfoReadyToView">
      <!-- makes the buttons - go through all pages, when click, open the page - display the page title as the label -->
      <!-- event binding - when we click, run the enableThisMenu function - passing in the bigCategory we clicked on -->
      <!-- this will figure out what you clicked on - we can't have to write this explicitly -->
      <ion-item ion-item *ngFor="let element of bigCategoriesArray" (click)="expandBigCategory(element)">
        <div>
          <i class= {{element.font_awesome}} style="color: #ffcc00"></i>
            &nbsp; &nbsp;
          <!-- bigCategory name -->
          <label>{{element.name}}</label>
        </div>
        <!-- if the bigCategory is expanded -->
        <div *ngIf="element.isExpanded" >
          <!-- *****WHAT TO DO WHEN WE CLICK A SMALL CATEGORY******* -->
          <ion-item menuClose ion-item *ngFor="let element of element.relatedSmallCategories" (click)="openUrl(element.url)">
            <!-- smallCategory name -->
            <label> {{element.name}} </label>
          </ion-item>
        </div>
      </ion-item>
    </ion-list>
<!-- </ion-content> -->

```

@reedrichards

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [February 17, 2018, 8:47am UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/13 "2018-02-17T08:47:23Z")

</div>

Thx. So like I said, could you try using `ion-header`?

I think the bar we only got the right size if you use

```
<ion-header>
</ion-header>
<ion-content> 
</ion-content>
```

---

<div class="post-metadata">

**Author:** ![hagan10](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hagan10/32/118397_2.png) [@hagan10](https://forum.ionicframework.com/u/hagan10)\
**Post date:** [February 17, 2018, 9:07am UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/14 "2018-02-17T09:07:06Z")

</div>

```auto
<!-- THE HOMEPAGE -->

  <!-- The <ion-navbar> is a template for the navigation bar on this page. As we navigate to this page, the button and title of the navigation bar transition in as part of the page transition. -->
 <!-- <ion-navbar style="height: 90px"> -->

<ion-header>
  <ion-navbar>
<!-- <ion-title style = "position: relative; top: 20px" >MyWestern</ion-title> -->
    <ion-title>MyWestern</ion-title> 
  </ion-navbar>
</ion-header>

<ion-content padding> 
<!-- <ion-content class="menu-content"> -->
    <!-- this is just determining if the info inside the sidebar is ready to view -->
    <ion-list *ngIf="sidebarInfoReadyToView">
      <!-- makes the buttons - go through all pages, when click, open the page - display the page title as the label -->
      <!-- event binding - when we click, run the enableThisMenu function - passing in the bigCategory we clicked on -->
      <!-- this will figure out what you clicked on - we can't have to write this explicitly -->
      <ion-item ion-item *ngFor="let element of bigCategoriesArray" (click)="expandBigCategory(element)">
        <div>
          <i class= {{element.font_awesome}} style="color: #ffcc00"></i>
            &nbsp; &nbsp;
          <!-- bigCategory name -->
          <label>{{element.name}}</label>
        </div>
        <!-- if the bigCategory is expanded -->
        <div *ngIf="element.isExpanded" >
          <!-- *****WHAT TO DO WHEN WE CLICK A SMALL CATEGORY******* -->
          <ion-item menuClose ion-item *ngFor="let element of element.relatedSmallCategories" (click)="openUrl(element.url)">
            <!-- smallCategory name -->
            <label> {{element.name}} </label>
          </ion-item>
        </div>
      </ion-item>
    </ion-list>
</ion-content>

```

I still get the same problem when using this… Also, I tried deleting everything in app.html and directly replacing it with Ionic’s home.html (as part of the tutorial - the tutorial does actually look correct on the simulator) - but for me, it didn’t show up correctly. I think the problem might be elsewhere besides the HTML.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [February 17, 2018, 9:40am UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/15 "2018-02-17T09:40:59Z")

</div>

@hagan10 ☹

I think we reached the limit of my know-how sorry, I don’t have more idea, sorry

---

<div class="post-metadata">

**Author:** ![hagan10](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hagan10/32/118397_2.png) [@hagan10](https://forum.ionicframework.com/u/hagan10)\
**Post date:** [February 26, 2018, 3:33pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/16 "2018-02-26T15:33:37Z")

</div>

Success! I transferred my code into Ionic’s starter template: instead of having my code in the “app” folder, I moved it to a page in the “pages” folder. Now it seems to work perfectly! Thanks for your help! @reedrichards @beck24 @MattE

 ![25%20PM](https://global.discourse-cdn.com/ionicframework/original/3X/5/d/5d79e32f8431ce35f0f0cf31c0d0a973e959af85.jpg)

---

<div class="post-metadata">

**Author:** ![beck24](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/beck24/32/112174_2.png) [@beck24](https://forum.ionicframework.com/u/beck24)\
**Post date:** [February 26, 2018, 4:03pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/17 "2018-02-26T16:03:09Z")

</div>

I also got mine working, but there was no code moving necessary. The unmentioned step is that you need to re-run `ionic cordova resources` to generate a new size of splash screen for iphone X. Without that new image, the app will always render in the safe space.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [February 26, 2018, 6:47pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/18 "2018-02-26T18:47:26Z")

</div>

@hagan10 awesome, congrats!

---

<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, 9:51pm UTC](https://forum.ionicframework.com/t/iphone-x-navbar-position/120931/19 "2021-07-19T21:51:24Z")

</div>

Closed on July 19, 2021, 9:51pm UTC