Change header - different header on each site not working

Hey guys,

i try to change the header of this app:

What i need is to create a separate header for each site.
I tried it with ion-header, but this doesn’t work.
Anyone an idea?

Here is the code:

<ion-view view-title="Items">
    
    <div ng-if="!vm.isCreating && !vm.isEditing">
        <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-content>
                <ion-list>
                    <ion-item class="item-remove-animate item-avatar item-icon-right" type="item-text-wrap" ng-repeat="object in vm.data">
                        <h2>{{object.name}}</h2>
                        <p>{{object.description}}</p>
                        <i class="icon ion-chevron-right icon-accessory"></i>
                        <ion-option-button class="button-assertive" ng-click="vm.delete(object.id)">
                            Delete
                        </ion-option-button>
                    </ion-item>
                </ion-list>
                <span><button class="button button-positive" ng-click="vm.signout()">log out</button></span>
                <span ng-click="vm.isCreating = true"><i class='icon ion-plus-round new-item'> Add Item</i></span>
        </ion-content>
    </div>

make 4 headers consecutive and show , hide them according to state as
ng-show and ng-hide

1 Like

Okay, i understand the theory, but i don’t know where do i have to place the code snippets.
The code in my first post is the docs-standard, but this doesn’t work.

Is it possible to show me an example? :smile:

Here is ionic header, make 4 header consecutive in index.html and show them according to state change
< ion-header-bar class=“bar-positive” ng-show=“changetoolbar” >
< h1 class=“title”>Ionic Header< /h1 >
< div class=“buttons” >
< button class=“button”>< i class=“icon ion-refresh”>< /i >< /button >
< /div >
< /ion-header-bar >