menuToggle followed by ion-button looks strange


#1

Hi
I try to achieve this nav layout:

left buttons: menuToggle followed by normal button
middle: title
right buttons: two normal buttons

But as you can see the normal buttons appears under the menuToggle and not on the right side of it.

any ideas?


#2

Place your menuToggle button outside the ion-buttons like this?

<ion-header>
  <ion-navbar color="primary">
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>      
    <ion-buttons left>
        <button ion-button icon-only>
          <ion-icon name="chatboxes"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Title</ion-title>
    <ion-buttons right>
      <button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content class="xm-new-order">
    <p>hello</p>
    
</ion-content>

#3

Haha, omg you got me.
Tried everything except that. Did just not feel natural. :stuck_out_tongue:


#4

Well, it isn’t natural if you ask me :wink: