How to remove space at the top of navbar

Ionic Framework ionic-v3
7

To remove the statusbar extra 20px definitely on iOS devices I followed this steps:

1- Add statusbarPadding: false to APP config and StatusBar.hide() on platform ready :

@App({
    template: '<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>',
    config: {
        // removes statusbar padding
        statusbarPadding: false 
    }
})
export class MyApp {
    rootPage = YourHomePage;

    constructor(platform:Platform) {
        platform.ready().then(() => {
                if (StatusBar) {
                    // hide StatusBar using cordova-plugin-statusbar
                    StatusBar.hide();
                }
            }               
        });
    }
}

2- In xcode, set ‘View controller-based status bar…’ setting to “NO” inside ‘Build Settings’ tab:

image
xcode02.png754×454 79.7 KB

3 - Check this two checkboxes in xcode (General tab):

  • Hide during application launch.
  • Requires full screen.

image

I solved this issue using this method @juanfsemaan.

2 Likes