Navbar MenuToggle Icon Not Showing Up

Ionic Framework ionic-v3
1

Hello,

I just updated to Ionic v 2.2 and the icon “start” / “menu toggle” in the navbar stopped showing up because of the following css (part of the ionic css), any idea why we added it in this version ?

Thank you !

CSS

.hide, [hidden], template {
    display: none !important;
}

HTML

<ion-header [class.header-fullscreen]="sidebarCollapsed">
    <ion-navbar>
        <button ion-button icon-only menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
       ...
    </ion-navbar>
</ion-header>
1 Like
2

I still see the hamburger menu. Just noticed that I use the attribute “start”, could it be the reason?

<ion-header>

    <ion-navbar hideBackButton="true">

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

i am having the same problem, is this the problem with user code or issue in @ionic

4

What problem exactly - something not showing up with Ionic 2.2? Then upgrade to a recent version.
If you have another problem, please describe it.

5

Add the persistent=“true” attribute to your ion-menu tag in your app component.

6

I am also having same issue . I have added persistant = true in ion-menu but it still didnt resolve my issue. When i use this.navCtril.setRoot(pageName). Then i can see my icons otherwise i cannot see my icons

7

I had the same problem until I stumbled upon the following on Menu Component page in the docs:

To add a menu to an app, the <ion-menu> element should be added as a sibling to the ion-nav it will belongs to. A local variable should be added to the ion-nav and passed to the ion-menus content property.

So in your app.html file you need something like this:

<ion-menu [content]="mycontent">
</ion-menu>

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

The local variable is “mycontent” in the above case.

See: ion-menu: API Framework Docs for Types of Menu Components

3 Likes
8

display: block !important;

This saved my day.
Just add a class to the button with the above css.

10 Likes
9

Check “Persistent Menus” on the doc:

An easier way to handle this than hard-coding a style.

10

You need to add attribute persistent="true" to <ion-menu> then menuToggle button will be available on all views. You can find more details here in the docs

2 Likes
11

:joy::rofl: Thank you bro

2 Likes
12

Hello, I am facing same issue in ionic v4 (Icon is not displaying)

Code


<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-toggle>
        <ion-button>
          <ion-icon slot="icon-only" name="menu"></ion-icon>
        </ion-button>
      </ion-menu-toggle>
    </ion-buttons>
    <ion-title start>Header</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <h1>Main Content</h1>
  <p>Click the icon in the top left to toggle the menu.</p>
</ion-content>
13

if you fully reload your browser view, the icon is displayed?

14

display: block !important;

This was magic! Can you pls explain how it worked , I am new to Javascript stack.

1 Like
15

thanks bro,
it works for me

16

That was it for me. Thaks!