Disappearing ion-nav-bar

Trying to start a new app via the blank template.

Added two routes:

.config(function($stateProvider, $urlRouterProvider) {

            url: '/home',
            templateUrl: 'templates/home.html',
            onEnter: function() { console.log('entering home...') }
            url: '/create',
            templateUrl: 'templates/create.html',
            onEnter: function() { console.log('entering create...') }

And copying from the ion-nav-bar docs, I changed the body contents of index.html to this:

<ion-nav-view animation="slide-left-right">


I can see that I am entering routes via the console.log statements, and I can see the content changing, but I have no nav bar at all. And the content is rendering at the very top left corner, both in a browser and in the emulator. The nav bar seems to be picking up a style attribute of “invisible” from somewhere. I am not applying ANY user styles at all. It is literally a fresh copy of the blank seed, save for the added routes. Especially weird in the emulator, since it’s rendering OVER the status bar. Here’s a screenshot:

So yeah. I’ve done BIG projects before in ionic and I can’t for the life of me figure out what’s wrong here.


Did you check your console for errors? Looks like something is crashing the angular portion of your app.

I get no error aside from the 404 for cordova.js. (expected)

Like I said - the app works. Angular is working, since I can change the routes and see the messages. But the nav-bar somehow gets a style of “invisible” applied. You can see it in the computed styles in Chrome.

I managed to sort this out after some very careful picking through the docs.


Do you mind sharing how you were able to resolve this?

Because I ran into this same issue and current responses to this post useless here is a solution I found.

ion-nav-bar {
    visibility: visible !important;
    display: block !important;

Not ideal but it fixed the problem.