Sidemenu template, custom back button and custom buttons in header not working

Hi all,
I’m new to ionic, and the framework looks very good! However I’m cracking my head already two days on a problem. I’m on ionic beta 14.
What I want to achieve (I started on the sidemenu template) is to have a custom back button (ion-close icon). I managed to achieve this with some workarounds:

.config(function($ionicConfigProvider) { $ionicConfigProvider.backButton.text('').icon('ion-chevron-left').previousTitleText(false);})

I can have this with a title, no issues, but when I want to have two buttons to the right of the title (with events which work, usually they are covered by the other header-bar), things become tricky.

So the design I want is:

x (back button) Title < > (for navigating left and right)

When I put the buttons there like in the following codepen, it seems the back button creates it’s own header-bar and I create one myself. Sometimes the back button header bar covers the navigation icons, so the design looks OK, but I’m not able to click the navigate buttons. I made it work in the browser by giving a css class to the header-bar of the back button with a certain width small enough not to cover the navigation icons, but this doesn’t work on mobile (it seems there the title is part of the first header-bar).

As you can see, the title ‘test’ is not shown.

Thanks for the help!

can someone help on this?
Seems that ion-nav-bar is creating a header-bar itself, so I’m unable to create a customized back button + buttons in the title (or I don’t know how to do it)

What about this for the navigation buttons?

    <ion-nav-buttons side="left">
      <button class="button button-icon button-clear"><i class="ion-close"></i>
    <ion-nav-title class="bar-positive">
        <h1 class="title">test</h1>
    <ion-nav-buttons side="right">
        <button class="button button-icon button-clear" ng-click="onSwipeRight()"><i class="ion-chevron-left"></i>
        <button class="button button-icon button-clear" ng-click="onSwipeLeft()()"><i class="ion-chevron-right"></i>
    <ion-content class="padding">

For the customized back button you would probably want to remove the ion-nav-back-button from the ion-nav-bar and then add your own.

1 Like

the best answer i have found

1 Like