Modifying Hamburger Menu Icon: Adding Text - ACHIEVED!

Greetings fellow Gliders,

Any CSS gurus out there know how I might modify the “Hamburger (Drawer) Icon” to include a little text. I saw some 2020 post on “Hiding” the Hamburger menu with CSS but found nothing on adding to it.

I have a more senior user base for one of my apps and they are having trouble realizing that there is more app content accessible by the top left Hamburger icon. Need to make it visually simple for them to find those extra menus in the drawer.

I’d love go from the standard Hamburger Menu…

Hamburger Menu

To a slightly modified “hint text” added version…

Any thoughts on achieving this? I realize if CSS it would need to go in a Rich Text field for all of my bottom tab visible “Details” pages. This is for the “Classic Glide Apps” by the way. :slightly_smiling_face:

After further review I guess this concept may NOT work because of the way the tab page names slides up next to the hamburger menu icon as you scroll the pages. However as someone did post a while back, it would have been great to be able to perhaps change the icon altogether, but we won’t mess with a mobile industry standard UX / UI design concept. :smile:

SUCCESS! As a coder (even a no-coder) we are taught to never give up. So I didn’t and now have the exact configuration I was seeking for my hamburger menu user experience.

Add in a “Rich Text” field, drop in some CSS, and magically you have added whatever title you want to your hamburger menu in Glide (on Classic Apps).

NOTE: You will need to add this new rich text element to ALL of your app Detail Tabs. :grin:

Here is the code…

Rich Text Field

AND here is the result…

New Hamburger Menu

3 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.