Solution 1 :

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):

     Content that's higher than 4em

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.

Problem :

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:

google chrome dev toolsmobile view

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:

enter image description here

…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:

   <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>
              <div class="dropdown-content">
                  <a href="/users/profile/4/">Profile</a>
                  <a href="/users/logout/">Log Out</a>
      <div class="nav-toggle">
          <div class="hamburger"></div>

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, 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.


Comment posted by dirkgroten

The only thing I can imagine is that the nesting of your divs is incorrect (a missing

can do that). Browsers tend to add missing closing divs automatically, but it’s pretty much undefined where they interpret the missing

needs to go and therefore you get inconsistencies. Extending a template can lead to this if you don’t pay attention to your {% block %} placement and divs within each block. So look at the real source sent back from your server (view source) rather than the ‘elements’ tab in the browser dev tools.

Comment posted by thean

Thanks for replying — tried out viewing the source, and from what I can see, everything seems pretty ok tbh. Didn’t find any slipups — I also updated the post in case the nav html has any relevant information

Comment posted by dirkgroten

It’s probably more about where the

is inside the rest of the page than the nav bar itself. Note that the HTML is what it is, so if it that’s what you expect it to be then the problem is the HTML itself (and the css). Once it arrives at the browser Django is out of the picture.

Comment posted by thean

I mean, I placed at the very bottom of the HTML, so the only thing that’s after it is the javascript. Theoretically, it should be above everything else.

Comment posted by thean

However, I did try 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 you’re definitely right, it’s not a Django problem, but I’m still baffled by what could be hindering the view.

Comment posted by

Thank you, that worked perfectly!! Except the only thing now would be that the nav isn’t sticky anymore on mobile even though it works fine on dev tools…do you know a way I could maintain the stickiness in absolute position? I saved another jfiddle with a bigger main div

Comment posted by dirkgroten

Use my alternative? (remove overflow: hidden) or did I miss something why it’s needed? imho it’s better to not have a sticky nav bar on mobile. It just takes away much needed screen real estate.