I have an ionic app built with the latest release consisting of 6 “view”, everything works well, a part that I am not able to style the dafault navbar; Here is my index.html
<body> <ion-nav-view></ion-nav-view> </body> </html>
And my typical controller view is like this:
<ion-view hide-back-button="true" view-title="Config"> <ion-content class="padding"> <div class="row"> <div class="col">
There is an implicit navbar (i’musing routing with $urlRouterProvider ) at the top, which is dark with white text, that I cannot access.
The best I could do is to add an explicit ion-nav-bar tag INSIDE the ion-view, and style this bar
<ion-view hide-back-button="true" xview-title="Config"> <ion-nav-bar class="bar-positive"> <ion-nav-title>Cippalippa</ion-nav-title> <ion-nav-buttons side="primary"> <button class="button" ng-click="doSomething()"> I'm a button on the primary of the navbar! </button> </ion-nav-buttons> </ion-nav-bar> <ion-content class="padding"> <div class="row"> <div class="col">
But I have inspected the DOM tree and indeed there are TWO navbars, one is the default, dark one, and the second is the one I can style (and wich, fortunaltey, is on top of the other one).This is not a solution I like, so…
what can I do to style the default nav bar, as put by the ionic framework?
or, how can I remove completely from the dom the default navbar?