search

troyhunt / troyhunt.com-ghost-theme

Brand new theme for the blog, all Ghost!
65 stars 23 forks source link

Fix responsive nav hamburger menu cutting off menu items #7

Closed jtc closed 2 years ago

jtc commented 3 years ago

The current responsive nav seems to "work" on:

But not on:

In the "broken" browsers, opening the responsive hamburger menu causes the Home / Workshops / Speaking links to get cut off by the top of the screen.

Windows Chrome Responsive Simulator Google Pixel Chrome

It seems to come down to browser difference in how they interpret a percentage height, where mobile Chrome and the others listed in "not working" are taking the 100% of the parent (div.header)'s height, 44px, for div.header_navMenu_wrap's height, hence the cut off menu items.

Changing .header_navMenu_wrap's (when responsive) height to 100vh sets it to 100% of the viewport height instead, matching what's already happening on iOS.

troyhunt commented 2 years ago

Hey, thanks for this, only just got around to addressing it. Now pushed out 😎