CODEWITHSUNDEEP
angularionic-frameworkionic3
ir2pid
ir2pid

Reputation: 6126

Ionic tab menu not showing or can't slide in from right

I want two navbar buttons, one for search and one for sliding the menu Using the below code,

<ion-header>

  <ion-navbar>
    <ion-title>{{ 'START_TAB' | translate }}</ion-title>

    <ion-buttons right>
      <button ion-button icon-only (click)="search()">
        <ion-icon name="search"></ion-icon>
      </button>
      <button ion-button menuToggle="right">
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

The menu button is missing altogether. enter image description here

When I remove menuToggle="right" parameter, I get the below result:

enter image description here and the toggle is from the left side as expected.

How do I make it toggle from the right and the icons be horizontally placed?

Upvotes: 1

Views: 179

Answers (1)

Mehdi
Mehdi

Reputation: 2398

Ok here is a possible way to do it, I'll leave it up to you to play around

<ion-header>

  <ion-navbar>
   <ion-grid>
       <ion-row>
          <ion-col-8>
             <ion-title>{{ 'START_TAB' | translate }}</ion-title>
          </ion-col>
          <ion-col-2>
              <button ion-button icon-only (click)="search()">
                <ion-icon name="search"></ion-icon>
              </button>
          </ion-col>
          <ion-col-2>
            <button ion-button menuToggle>
               <ion-icon name="menu"></ion-icon>
         </button>
          </ion-col>              
       </ion-row>
   </ion-grid>
  </ion-navbar>
</ion-header>

Ok so this part above should get you closer to the display you want for your header.

As for the menu opening from the right side, go to app.html or where your menu component is called and add side="right" to the ion-menu like so :

<ion-menu [content]="content" side="right">

Upvotes: 1

Related Questions