Navbar MenuToggle Icon Not Showing Up

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

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>

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

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.

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

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

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: https://ionicframework.com/docs/api/components/menu/Menu/

3 Likes

display: block !important;

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

9 Likes

Check “Persistent Menus” on the doc:

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

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

:joy::rofl: Thank you bro

3 Likes

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>

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

display: block !important;

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

1 Like

thanks bro,
it works for me

That was it for me. Thaks!