Why are my thumbnails scrolling overtop my navbar?

Heya! I’m having a weird problem with the thumbnails of my project tiles for my portfolio page scrolling over my navigation bar. I tried to google various things about layering but didn’t come up with the right topics.

Here’s the link to the portoflio pen.

This is what’s happening when the window is “too short”:

I’d like it to go “under” the navigation bar instead, like how the text does.

I don’t know exactly where the problem would be, and the code is in the Codepen above, but here’s where it could be:

CSS

nav {
  background: black;
  position: fixed;
  width: 100vm; /* why do I have two different widths? */
  width: 100%;
  top: 0;
  padding: 20px;
  font-size: 18px;
}

a {
  color: grey;
}

a img {
  color: black;
}

a:hover {
  color: white;
  transition: 0.2s;
}

a:hover img {
  color: white;
  opacity: .5;
  transition: 0.2s;
}

.project-tile {
  position: relative;
  text-align: center;
  color: black;
}

.project-thumbnail {
  width: 400px;
  border-radius: 80px;
  border-style: solid;
  border-color: black;
} ```

  <section id="projects">
   
    <!-- Tribute Page -->
    <div class="project-tile">
      <a id="project-thumbnail-tribute" href="https://codepen.io/holdenmad/pen/XWJvmZW">
        <img class="project-thumbnail" src="https://i.ibb.co/4YDvRT5/Screenshot-2020-04-11-at-18-59-53.png"></a>
      <div class="project-title">Tribute Page</div>
    </div>

    <!-- Survey -->
    <div class="project-tile">
      <a href="https://codepen.io/holdenmad/details/JjdLdPO"><img class="project-thumbnail" src="https://i.ibb.co/Vtq4vKK/Screenshot-2020-04-11-at-19-00-05.png"></a>
      <div class="project-title">Survey</div>
    </div>
    
    <!-- Product Landing Page -->
    <div class="project-tile">
      <a href="https://codepen.io/holdenmad/details/zYGJOYV"><img class="project-thumbnail" src="https://i.ibb.co/p3T3ZtN/Screenshot-2020-04-11-at-19-00-25.png"></a>
      <div class="project-title">Product Landing Page</div>
    </div>
    
    <!-- Technical Documentation -->
    <div class="project-tile">
      <a href="https://codepen.io/holdenmad/pen/MWwNzBj"><img class="project-thumbnail" src="https://i.ibb.co/YDzVSqz/Screenshot-2020-04-11-at-19-00-35.png"></a>
      <div class="project-title">Technical Documentation</div>
    </div>
  </section>```

Thanks in advance for your help!

Maybe you can add z-index: 1 to nav.
Besides, you can remove width: 100vm;.

nav {
  z-index: 1;
  background: black;
  position: fixed;
  width: 100%;
  top: 0;
  padding: 20px;
  font-size: 18px;
}

1 Like

Fantastic, that worked, and now I can look up more about z-index. Thank you for looking at it!