Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Boris Kamp
Boris Kamp
16,660 Points

hamburger menu toggle issue on iOS

I used the great hamburger menu animation from this great codepen (http://codepen.io/designcouch/pen/Atyop) it works great (will shrink down the size a bit)

however, when opened/closed on iOS (iPhone 6 & latest iPad) with chrome or safari, the whole page zoomes out to the left, note the white row on this screenshot (https://www.dropbox.com/s/0zkuibzlxl4kh1b/IMG_1308.jpg?dl=0) when closed, the page is normal again.

Please try it out yourself. on a site like screenfly, it works great, so it has to do something with iOS right?

I put it on a test domain here: http://mdevries.wpengine.com/

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I just looked at it on my iPad at the link that you gave and the white bar isn't there for me as it is in the screenshot you posted. Which version of iOS are you using and which browser? I'm using iOS version 9.2.1 and the Safari browser. I'd suggest first making sure your iOS and browser apps are up to date.

Boris Kamp
Boris Kamp
16,660 Points

Hi @jennifernordell

Thanks for your help! Your probably not viewing it on a small enough device (less than 768 pixels) device so that the mobile menu pops up. if you do the splitscreen on iPad (swipe left from the right bezel on the screen) and open safari or chrome, you will view it so that the hamburger menu pops up (-: