0

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

beyondraymond
  • 11
  • 4
  • I think you need to move this ```font-size``` style on the host to make an easy customization of your button *from* ```ion-menu-button{font-size: 31px !important;}``` *to* ```:host{font-size: 31px;}``` – Newbee Apr 13 '23 at 07:51
  • Thanks for the tip @Newbee. I tried it already but my hamburger button just appear to be smaller while the icons from the right appeared to become bigger. – beyondraymond Apr 13 '23 at 08:05
  • Maybe you need a class. Try add class then add it to host*(ex)*```:host(.menu_btn){font-size: 31px;}``` Or make the icon to be larged `````` – Newbee Apr 13 '23 at 08:47
  • @Newbee, thank you for the above tips. I appreciate that. I still have the same issue unfortunately. As for the latter tip, the tag is but it didn't work even after adding the 'size' attribute. – beyondraymond Apr 13 '23 at 09:10
  • I'm sorry I couldn't help. There is limited code, so I couldn't check what really causing the problem is. If you could provide some of your could or make an playground, It could be help. Then this *ion-icon* should inside your *ion button*. This is what it looks like. ``````. But i said, maybe this couldn't help so until ypu provide some of your data, maybe I could help in some way. – Newbee Apr 13 '23 at 12:10

2 Answers2

0

Simply by using the zoom property:

ion-menu-button  {
 zoom: 1.8;
}
StackoverBlows
  • 473
  • 7
0

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>
beyondraymond
  • 11
  • 4