How to get an menu icon i each side of the header?

Hi all.

This is driving me mad! I have a menu like this:

  <ion-side-menu-content>
<ion-nav-bar class="header">

  <ion-nav-back-button> Back
  </ion-nav-back-button>

  <ion-nav-buttons side="left">
    <button class="button icon ion-navicon button-clear " menu-toggle="left"></button>
  </button>
  
   <h1 class="title"></h1>

  <button class="button button-clear">
    <div class="button button-clear" ng-click="show_no_connection_popup()" style="padding-right:10px"><i class="fa fa-wifi download"></i></div>
  </button>

  </ion-nav-buttons>

</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>

Here I get a menu icon in the left side, and a lost connection icon in the right side as I wanted. Problem is that the view-title doesn’t show anymore because of the <h1 class="title"></h1> tag.

In all my views I use: <ion-view view-title="my view title"> but this doesn’t work unless i delete the h1 tag in the menu, but when I do that the lost connection icon gets LEFT ALIGNED!?.

Anyone has a solution to this? or can explain how I can right align the second icon and keep my view-titles in place?