Navbar is under the Status bar on ios simulator

i try many way, but it not effect.
finally do those step solve my problem:

  1. add plugin StatusBar:

cordova plugin add org.apache.cordova.statusbar

  1. remove this code from app.js:


Hope this help!.

I had same issue in $ionicModal so user would feel hard to touch close modal button.

The problem was I was using {{someVar}} in class attr.

EX : class=“bar bar-{{themeColor}}”

I wanted to change depends on themeColor var.

After I replaced ng-class, problem resolved.

I had already tried everithyng in this topic and doens’t work, can anyone help me?



Ionic has specific classes to deal with this – platform-ios and platform-cordova. Ionic’s pre-built elements target those classes and add in 20px top margin to the buttons in your header to make up for these situations. To get my own custom elements to do the same, I follow the same pattern. For my .search-bar above, I add a margin if we’ve got a .platform-ios.platform-cordova:not(.fullscreen) body class. Example:

.platform-ios.platform-cordova:not(.fullscreen) .search-bar {
margin-top: 20px;
This should be the correct answer. It worked for me.

To solve that you have to download the status bar plugin

cordova plugin add cordova-plugin-statusbar

Then configure it following the documentation