How do I edit the side menu header icon?

ionic-v1
1

I am just beginning on ionic and am starting with the premade sidemenu template project. I’d like to edit the side menu button to look more like android i.e ion-android-drawer icon and left aligned logo. Where is the code that sets the menu button?

2

The ion-nav-buttons directive holds the menu icon. You can test it in this codepen.
Look for the below code. The ion-navicon class is what you will change.

<ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
    </button>
</ion-nav-buttons>

If you are looking to left align the logo I would check out the nightly builds. Ionic beta 14 is changing the transitions and look and feel to be more native. With this version of Ionic it will automatically left align the title when you are on an android, but center it if you are on ios. The nightly builds are being worked on to fix all issues prior to releasing 14. You can get this code here: http://code.ionicframework.com/#nightly or if you’d rather wait until they release beta.14 it will have these features.

3

In a related topic, how do i change the button-icon when the menu opens?

  • When the menu is closed, the icon is ‘ion-android-menu’
  • When i open the menu, i want it to be ‘ion-close-round’

Is that achievable?

1 Like
4

You can check if the menu is open and apply the class using ng-class:

<button class="button button-icon button-clear" menu-toggle="left"
    ng-class="$ionicSideMenuDelegate.isOpen() ? 'ion-close-round' : 'ion-android-menu'">
</button>

Then in the controller

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) {
    $scope.$ionicSideMenuDelegate = $ionicSideMenuDelegate;

    ...
});

Codepen: http://codepen.io/brandyshea/pen/GgzbjG?editors=101

Note: there may be another way of checking if the side menu is open directly in the HTML but I don’t know of it.

3 Likes
5

Thanks @brandyshea, it works like a charm

:slight_smile: :slight_smile:

1 Like
6

How to do the same with ionic2?

7

How can I change the sidemenu 3 line bar icon?