Pull down for navigation is a great way to display your website navigation on responsive web designs. On smaller devices such as the iPhone the pull down for navigation system allows you to create a bar at the top of the screen that you pull down to reveal the navigation boxes. It works really well and we’ve been using it on the kc web design kent responsive web design ever since we built it. Unfortunately, ever since iOS6 was released something in the update to Safari on iOS6 broke the pull down for navigation javascript code. Fortunately, theres an easy fix. Just replace this line…
top: mobileNavHeight + 'px !important'
with this one…
top: mobileNavHeight + 'px'
And it will work again on iOS6 in your responsive web design.
Responsive web design navigation
There are many ways of achieving good navigation on smaller devices in your responsive web design projects. There seems to be no set standard yet and many websites use navigation features such as drop down menus, responsive navigation bars that expand, pull down to reveal, slide in from the side navigation and many more. A lot of it comes down to the complexity of your responsive web design project and how the website design will look on smaller devices. It’s a case of working out whats going to work best for your website design. We do have a kind of standard forming on mobile navigation in that lots of people are starting to use the convention of the 3 line icon to denote a navigation element that will reveal a full nav bar on responsive web design mobile sites.