Search code examples
angularionic-frameworkionic6

How do I make ion-menu-button larger in md(Android) mode?

I changed the font-size of my ion-menu-button (hamburger button) using the following CSS code.

ion-menu-button  {
  font-size: 31px !important;
}

The above code seems to work on my app in ios mode. (See attached screenshot) Screenshot of Ionic App in ios mode

But that was not the case when I tried running the app on md mode(Android). The hamburger button is still small even and the CSS code doesn't have an impact (See attached screenshot) Screenshot of Ionic App in md mode(Android)

Some fixes I tried include adding a CSS with .md class to target the hamburger button specifically but it didn't work.

I tried fixing my problem by applying this code from Stack Overflow: How do I make ion-menu-button larger?

After applying the fix above, the hamburger button now has the right size but the toolbar appears to become larger and I don't want my toolbar to look larger that's why I reverted the fix and was hoping someone could help me solve my issue. (See attached screenshot)

Screenshot of Ionic App after applying code fix

Solution

  • Thank you for all of your feedbacks. I was able to find a solution to my problem by adding class="ion-no-padding ion-no-margin" to my . I'm not exactly sure how it work but I'm satisfied with this workaround. My final code is:

    <ion-menu-button auto-hide="false" class="ion-no-padding ion-no-margin"></ion-menu-button>