Cannot style default Navbar (ion-nav-bar)

ionic-v1
1

Hello

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?

Thanks
Z

2

Ok, solved.

I was using states and an abstract template (with nav-bar…) for every page. That’s the mistery of the “default” navbar.

Sorry :smile:

This is my app.js main file

angular.module('iosapp', ['ionic','ui.grid','ui.grid.infiniteScroll'])
    .config(function ($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('app', {
                url: '/app',
                abstract: true,
                templateUrl: 'templates/navmenu.html',
                controller: 'navmenuCtrl'
            })
            .state('app.install', {
                url: '/install',
                templateUrl: 'templates/install.html',
                controller: 'installCtrl'
            })

In this case, inside templates/navmenu.html there was

<ion-nav-bar class="bar bar-dark">

</ion-nav-bar>
<ion-nav-view>

</ion-nav-view>

and this was the navbar.!

Hope this helps