How to remove space at the top of navbar

Hi everyone.
I’m developing an ionic 2 typescript APP, only for iOS devices.
I want to hide StatusBar and I can do that installing cordova-plugin-statusbar and, after platform ready…

if ( StatusBar ) StatusBar.hide( );

It works but my navbar height is incorrect.

How can I remove space at the top of my navbar, after hide StatusBar?
Ionic v1 solves this with:

ionic.Platform.fullScreen( );

but I don’t know how to do that on ionic v2

Thanks in advance.

Hi @ramon, did you solve this issue?

Hi @juanfsemaan, the truth is that I have not solved this problem yet. :head_bandage:

If I found a solution I’ll post it.


[flood_mode] I like user hate programs that hide the status bar. [/flood_mode]

Try change css.

@mhartington, can you help us with this issue?


Hmm, at the moment, I don’t think there’s a built in solution for this.

Though, I’ve opened an issue for this feature so we can get it into V2 core.

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 :

    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

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

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

  • Hide during application launch.
  • Requires full screen.


I solved this issue using this method @juanfsemaan.


thanks @ramon statusbarPadding: false did it!

1 Like

Since Beta 8, “App” has been replaced by “Component”, so you have to add the “config” as the third parameter to the call to ionicBootstrap like this:

let config = {statusbarPadding: false};
ionicBootstrap(MyApp, null, config);

This worked perfectly for me.

1 Like

try this

.ios ion-nav > .ion-page > ion-content.statusbar-padding:first-child .scroll-content{
     padding-top: 0px !important;

IonicModule.forRoot(MyApp, {statusbarPadding: false}), …

did the trick for me. Thanks!


It work for me too, thanks.