The problem is the css for header where you set position: fixed; height: 4em; overflow: hidden;. Your nav also has position fixed (in case the screen width is < 950px):

<header>
   <nav>
     Content that's higher than 4em
   </nav>
</header>

header {
  position: fixed;
  top: 0;
  left: 0;
  height: 4em;
  overflow: hidden;
}

nav {
  position: fixed;
  z-index: 1000;
}

So Safari keeps the nav inside the header because they both have fixed position. Which means it respects the overflow: hidden instruction.

Change your header css to position: absolute. This way the nav moves outside of the header when it gets fixed position.

header {
  position: absolute;
  ...
}

That does remove the stickiness of the nav bar though, so it affects the behaviour of your site. It’s not a bad thing actually to let the nav bar scroll away on small screens, so you could change it just on small screens.

Alternatively, just remove overflow: hidden. I don’t see what it’s good for:

header {
    position: fixed;
    ...
    # overflow: hidden; (remove this)
}

Apparently, fixed within fixed is interpreted differently by chromium and webkit. It seems chromium is doing the right thing and decoupling the two boxes, although it seems that the official spec leaves some room for interpretation here.

I’ve spent a week trying to figure this out. I’m building a django website, and I have a navigation menu that always remains hidden behind some element when I look at the website on my mobile view. On Chrome Dev Tools, it looks perfectly fine, but on my phone, it’s completely gone.

Example of Chrome Dev Tools vs Phone:

My first step in solving this was looking at the z-index. None of the indexes I tried worked, and I made sure to search for solutions to z-indexes not working on the Internet as well, such as having necessary prerequisites. Since my navigation menu is in my base.html template file, I even moved the header down to the very bottom of the body element (it has a fixed position), so that {%block content%} was always above the header. That didn’t work either.

So I tried moving all elements to the left whenever the navbar was open. This is what happened.

If I try inspecting this on chrome dev tools by right clicking the empty space where there should be empty space, I get the following:

…meaning the only thing that’s there is the HTML file itself. I’m completely baffled. I have no background in my HTML element either.

I have a feeling that this is an issue pertaining to Django, perhaps related to the fact that my nav rests in my base.html template, which is extended in nearly all of my other pages. I’ve used this exact same navigation format for other websites I’ve built, and they all worked fine, so I doubt the problem lies in the navigation css. I also have a few other navigation menus for particular pages that all work fine, which I’m assuming is because their navigation menus rest in a template that is not base.html, i.e. it isn’t extended. I’m desperate — does anyone have an inkling of an idea why this is occurring? Huge thanks in advance.

Edit: Opening the View Source tab, everything seems to look okay. I scanned through the whole document, but here’s an overview of just the navigation portion html in case it’s relevant:

<header>
   <a href="/home/"><img></a>
   <nav class="nav">
       <ul class="styled-list">
           <li><a href="/home/"><img>Home</a></li>
           <li><a href="/browse/"><img>Browse</a></li>
           <li><a href="/messages"><img>Inbox </a></li>
           <li><a href="/activity"><img>Activity</a></li>
           <li class="dropdown">
              <button class="dropbtn">
                  <a href="/users/profile/4/"><img>e</a>
                  <i class="fa fa-caret-down"></i>
              </button>
              <div class="dropdown-content">
                  <a href="/users/profile/4/">Profile</a>
                  <a href="/users/logout/">Log Out</a>
              </div>
           </li>
        </ul>
      </nav>
      <div class="nav-toggle">
          <div class="hamburger"></div>
      </div>
</header>

Edit 2: I tried taking the HTML out of the base.html and putting it directly in one of the pages so it wasn’t extended, and the problem continued even without base.html being extended. So it’s probably not a Django problem, but I’m still baffled by what could be hindering the view.

Edit 3: If it helps, I can actually access the nav elements on mobile, like I can click on the links and go to those pages. It just refuses to show up, that’s all. This means I think that the nav is already above everything else, but for whatever reason, looks like its background and text are transparent, which doesn’t make any sense tbh.

Edit 4: Just realized that the mobile view works fine on Samsung, but glitches out on Apple. Now I’m just hopelessly lost.

Edit 5: Made a minimal reproducible example on jsfiddle, https://jsfiddle.net/aqxr9duy/2/. It works fine on the laptop, but if you view it on an iPhone (jsfiddle isn’t exactly optimized for mobile view, but its still somewhat viewable), the navigation doesn’t appear properly like it does on a laptop view.