How to hide slide icon when back button is shows up?

I want to hide slide icon in header when there is back button.
Please see
Here on Page2 both (Back and Slide) icon are showing .

Can anybody please help me out?

That codepen is broken for me, but I assume you want to hide the menu icon. In order to do this just set the enable-menu-with-back-views to false:

<ion-side-menu side="left" enable-menu-with-back-views="false">

And make sure your menu icon has the menu-toggle attribute:

<button class="button button-clear" menu-toggle="left" aria-label="Menu"><i class="icon ion-navicon"></i></button> this codepen is working please try again.
But I tried your solution , it is not working.

Yes, my solution requires a sidemenu to work.

If you want to dynamically hide an icon (regardless of what icon it is), you can check if the back button is shown and then set a variable to hide the icon:

$rootScope.$on('$ionicView.beforeEnter', function (e, data) {        
    if (data.enableBack) {
       // set a variable

I created this codepen to show you both ways to do it:

The menu icon is being hidden by the first solution above, and the home icon is being shown when the back button is enabled. There may be other ways to do this.

Hi brabdyshea ,
Thanks for replying.
But Your first method is working on your codepen , But when It tried it on my local end , it is not working.


Do you have a sidemenu in your project? Is there any way you could put your code into a codepen so I could see what is causing it to not work?

Hi brandysheas ,
Thanks Finally it works :slight_smile: . Extra menu icon was coming from template of page.

1 Like