CODEWITHSUNDEEP
ionic-frameworkionic2
Ronan Lopes
Ronan Lopes

Reputation: 3398

Ionic 2 - Menu button showing on right side (Browser)

I'm learning about Ionic 2 in a udemy course. In my app, my menu button should be displayed on left side, but instead, is showing on right side (I opened on chrome and firefox on linux). However, on the course video example, the button was correctly displayed on left side (he uses a MAC). I also downloaded the source code from the course and executed the server on it, and got the same result.

My app.html:

<ion-menu [content]="nav">
    <ion-header>
        <ion-toolbar>
            <ion-title> Menu </ion-title>
        </ion-toolbar>
    </ion-header>           
    <ion-content>
        <ion-list>
            <button ion-item (click)="onLoad(tabsPage)">
                <ion-icon name="quote" item-left> </ion-icon>
                Quotes
            </button>
            <button ion-item (click)="onLoad(settingsPage)">
                <ion-icon name="settings" item-left> </ion-icon>
                Settings
            </button>
        </ion-list>
    </ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #nav></ion-nav>

Upvotes: 1

Views: 983

Answers (1)

YATO
YATO

Reputation: 107

This weird behavior happens when viewing your Ionic App in Browser as I am experiencing right now. Are you building for Android Platform or iOS? You have Right Click + Inspect then on the top of your 'Mobile Viewed' app, you should see a dropdown which is set to default, change that to Nexus for Android and so on. The menu button will sit on the right side on iOS device and left in an Android and Browser.

The following code shall fix the issue:

<ion-header>
  <ion-navbar primary>
    <ion-title>Schedules</ion-title>
    <ion-buttons left>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Upvotes: 1

Related Questions