search

VPenkov / okayNav

The world's okayest responsive navigation. This is (sort of) a legacy implementation. Please stay tuned to the 3.0 branch (https://github.com/VPenkov/okayNav/tree/v3.0)
4.02k stars 266 forks source link

Menu icon getting misaligned on iOS Safari #57

Closed typhoon2099 closed 3 years ago

typhoon2099 commented 7 years ago

I've run into an issue where the menu icon gets pushed down onto a new line on Safari on iOS (tested on an iPhone 5S running iOS 10.2). The issue popped up during bugtesting on a project but can be seen on the Codepen found in the readme.

Here's a screenshot

Adjusting any of the CSS in the developer tools instantly fixes this, so appears to occur on the initial render.

Cheers, Matthew Simpson

michaelwilhelmsen commented 7 years ago

+1 I have the exact same issue

lgfstudio commented 7 years ago

You can changehange the CSS to have the toggle fixed, as you need in the corner of the page all the time anyway...

.okayNav__menu-toggle { position: fixed !important; z-index: 999; top: 15px; right: -5px; float: left; width: 60px; height: 20px; cursor: pointer; transition: -webkit-transform .4s cubic-bezier(.55, 0, .1, 1); transition: transform .4s cubic-bezier(.55, 0, .1, 1); transition: transform .4s cubic-bezier(.55, 0, .1, 1), -webkit-transform .4s cubic-bezier(.55, 0, .1, 1) }