Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Hamburger Menu Issue on Android/Gmail

bigscarycranium

Newbie
Total Posts:  2
Posted: 12 April 2017 10:55 AM

I’d like to use a hamburger menu in an email and have it working as it should in all desired clients except Gmail on some Android devices. I have tried and tried and simply can’t get the top nav to display properly. Any suggestions?

My project is here: http://codepen.io/Evangogh/pen/bWGqJb and a screenshot of the email in Gmail on a Samsung Note 5 is here: https://gallery.mailchimp.com/fa9065ac83955ec7117a3a8cd/images/edd36f0f-7579-4b94-b1cc-23a44f818422.jpg.

You can also see the issue in the Android Gmail 6 result here: https://www.emailonacid.com/app/acidtest/display/summary/3gWF9fepPgIXCYQwJqwOzpwR7AKMRUaTVzN7DLw3cFHZu/shared.

Thanks in advance for any help.


 

marjoleinverheij

Avatar
Jr. Member
Total Posts:  31
Posted: 12 April 2017 01:56 PM
[ # 1 ]

Well, the Gmail app doesn’t support hamburger menus. So you’ll need to build in a override for that.
You can do this by added a class to the body tag and than targetting the Gmail app this way:

u + .body (class in the body tag) .classyouwanttotarget

More info can be found here: http://freshinbox.com/blog/targeting-new-gmail-css/


 

bigscarycranium

Newbie
Total Posts:  2
Posted: 13 April 2017 11:31 AM
[ # 2 ]

Hi @marjoleinverheij -

The hamburger menu isn’t appearing in the app, but the nav links are overlapping, so the email is breaking.  I’ve tried making the font size smaller but can’t seem to target them.


 

marjoleinverheij

Avatar
Jr. Member
Total Posts:  31
Posted: 14 April 2017 07:19 AM
[ # 3 ]

It might have something to do with the media query you put the hamburger and Gmail code in:
@media (max-width:480px) and (-webkit-min-device-pixel-ratio: 0) {

You could try just using @media (max-width:480px) to see if that works.