Align menu icon to the left in ionic framework

Question

I'm having a big issue with aligning an icon to the left. No matter what I do, it aligns to the right side of the screen. Other pages do not have problem and aligns perfectly to the left. This issue happens when I use a tab.

How do I fix this? There's no CSS code as I'm using the default codes.

This is my ionic code:

<ion-header>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
    <ion-segment end [(ngModel)]="stories">
      <ion-segment-button value="headlines">
        Headlines
      </ion-segment-button>
      <ion-segment-button value="new">
        New
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

No matter what I do, this is the end result:

PS: I'm using the latest version of ionic.

Answer 1

Just like @Sam5487 said, you should use an ion-navbar instead of the ion-toolbar (if you're using the toolbar in order to avoid the back arrow icon when pushing the page, you should set that page as root instead of just pushing it to the nav stack).

About end/start/left/right

I've also seen that you've used the start attribute in the ion-buttons, but it doesn't mean it will be placed to the left, since start and end follow the UI pattern for the platform

So <ion-buttons start> would be on the left for ios and be the first button on the right for android.

And <ion-buttons end> would be on the right for ios and the last button on the right for android.

So with both start or end the button will be placed at the right on Android.

If you want to place a button at the left or the right in both platforms, you should use left or right, since these attributes are provide as a way to over ride that.

Using the menuToggle button

That being said, if you take a look at the menuToggle docs:

If placing the menuToggle in a navbar or toolbar, it should be placed as a child of the <ion-navbar> or <ion-toolbar>, and not in the <ion-buttons>.

So in order to achieve the desired result, you just need to change your layout for this one:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-segment [(ngModel)]="stories">
      <ion-segment-button value="headlines">
        Headlines
      </ion-segment-button>
      <ion-segment-button value="new">
        New
      </ion-segment-button>
    </ion-segment>
  </ion-navbar>
</ion-header>

You can also confirm that this is the recommended way to do it, by taking a look at this page from the Conference App demo made by the guys at Ionic

Answer 2

Try this instead

<ion-header>
 <ion-navbar>
      //*** Rest of the header code ***//
  </ion-navbar>
</ion-header>

Also in your button that is only an icon i suggest adding icon-only as well.

  <button ion-button icon-only menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>