main image

Keeping the iPhone Nav Bar in Place While Scrolling

12 Oct 23 · views

If you're into web design, you might've noticed that some websites have this neat trick where the iPhone navigation bar stays maximized as you scroll.

Now, you're probably wondering, "How do they achive this?" Especially when that auto-minimizing nav bar can mess with your bottom-fixed UI elements.

Here's the hack: You wrap your entire website content in a new div element. That way, even though your users think they're scrolling down the page, they're actually just navigating within that div. The result? A static iPhone navigation bar that doesn't expand or shrink, making for a consistent and slick user experience.

So, first step: Encapsulate all your website content inside a new div element.

<div id="wrapper">
  <!-- Your entire site content -->

Now, let's add some CSS to make this work.

body, html {
  height: 100%;
  margin: 0;
  overflow: hidden;

#wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

You're basically putting the viewport on lockdown. With position: fixed, you're anchoring that new div to the top of the browser window, while allowing the content inside to move freely. This clever maneuver keeps the iPhone's navigation bar from bouncing around like it usually does, giving your users a more stable experience.

Sign up for my weekly newsletter for more frontend tips and tricks

Subscribe to my Newsletter!

Where I write about frontend development topics

Charles is a Stockholms based frontend developer and designer who specializes in creating captivating digital experiences. His acute sense of aesthetics and coding expertise allow him to seamlessly fuse creativity with functionality, turning concepts into visually stunning websites and apps.

+46 70 023 05 43


© Charles Krook 2023 All rights reserved