Ionic Navigation Bar

Question

I am trying to add pages with links in navigation bar(to be in middle). On the right I want to have nav button which on click open the side bar on the right. For now I just put the nav button but I cant figure how to put links in center of navigation bar. Code example:

<ion-side-menus>
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button ng-click="myGoBack()">
      </ion-nav-back-button>
      <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent">

    </ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="right">
    <ion-content>
      <ion-list>
         <ion-item menu-close ng-click="">
          Traveler
        </ion-item>
        <ion-item menu-close href="">
          Pinko
        </ion-item>
        <ion-item menu-close href="">
          Club
        </ion-item> 
        <ion-item menu-close ng-click="">
          My Agency
        </ion-item>
        <ion-item menu-close href="">
          My Karma
        </ion-item>
        <ion-item menu-close href="">
          Notification
        </ion-item>
        <ion-item menu-close href="">
          Profile
        </ion-item>
         <ion-item menu-close href="">
          Settings
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Aslo here is an image so you can see what I need:

Answer 1

I don't know how you are handling the transition to different $states, but you can try to insert the links inside the <ion-nav-title> tag in the following way:

  <ion-nav-title align='center'>
    <span><a href="">Link 1</a></span>
    <span><a href="">Link 2</a></span>
    <span><a href="">Link 3</a></span>
  </ion-nav-title>

Then if you want to move the title on the left side like in the image you have attached, you can use $ionicNavBarDelegate inside your controller with $ionicNavBarDelegate.align('left').

Finally if you want to modify the spacing or the color of the links, do it via css like I did in this fiddle. I hope that my answer helps you!