Header bar height with menu and a button

Question

My ionic 3 header need to show a menu icon a title and a button in the end. However with these 3 things the header renders these in 3 different rows rather in one single row. See the screenshot as an example

https://www.dropbox.com/s/jrn95uppcwol3v8/ionic_header_issue.png?dl=0

the header looks like below home.html

<ion-header>
        <ion-navbar hideBackButton="true">
            <page-header [title]="'My Company'"></page-header>
        </ion-navbar>
</ion-header>

pageHeader.html

 <ion-buttons left>
        <button ion-button menuToggle icon-only >
                <ion-icon name='menu'></ion-icon>
        </button>
    </ion-buttons>
  <ion-title>{{title}}</ion-title>
  <ion-buttons right>
      <button ion-button (click)="openCart()"><ion-icon name="cart"></ion-icon>
          <ion-badge >1</ion-badge>
      </button>
  </ion-buttons>

Answer 1

add some inline styles like this

<ion-header>
<ion-navbar hideBackButton="true">
<button ion-button menuToggle>
<ion-icon ios="ios-menu" md="md-menu"></ion-icon>
</button>
<ion-title class="title">Your Title
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="navcart()">
<ion-icon name="cart"></ion-icon>
<ion-badge class="carts" item-right color="danger">{{noOfItems}}</ion-badge>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>

Answer 2

Try wrap menu icon in with ion-buttons with directive left and change end to right:

<ion-header>
  <ion-navbar>
    <ion-buttons left>
      <button ion-button icon-only>
        <ion-icon name="menu"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>VIK</ion-title>
    <ion-buttons right>
      <button ion-button>
        <ion-icon name="cart"></ion-icon>
        <ion-badge>0</ion-badge>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

It's working fine in fresh Ionic 3 template: https://stackblitz.com/edit/ionic-neb7g5

Maybe you have overwritten some default css styles?