My navbar "position sticky" has stopped working and I can't figure out why

Question

So I'm still fairly new at about 2 months experience. However, I have a bad habit of jumping to the next topic without practicing just assuming I'll retain it, leading to me either forgetting or struggling when I try to start a project. So I'm trying to break this habit so I can master it and this brings me to my question. I'm having trouble with my sticky nav "sticking".

HTML

    <div class="header">
    <div class = "intro">
      <h2 class = "introduction">Hello, I'm <br></h2>
    </div>
</div>

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

<div class="container">
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
</div>

CSS

body{
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu', sans-serif;
  background-color: #393c42;
}
.container {
  margin: auto;
   max-width: 900px;
}

.header{
  min-height: 900px;
  background-color: #393c42;
  padding: 0;
  margin: 0;
}

.intro {
}

.introduction {
  font-size: 50px;
  text-align: center;
  padding-top: 400px;
  font-family: 'Permanent Marker',sans-serif;
  color: #6bd3e5;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.active {
    background-color: #6bd3e5;
}

h2 {
  padding: 0;
  margin: 0;
}

.projectSquares {
  width: 40%;
  background: #333;
  padding-bottom: 30%;
  float:left;
   margin: 1%;
}

Basically I'm trying to use the position: sticky but it has stopped working. Seemed to quit working after I put all the .projectSquares divs in but I can't see how. I think something is conflicting with it but I can't figure it out. Any help would be greatly appreciated and I apologize if my code doesn't make any sense.

Also if there is a simpler way to get the banner image/ sticky nav underneath effect going any pointers would be great.

Answer 1

The important thing to remember with position: sticky is that it's treated as a relatively-positioned element until you scroll past a certain point. Because of its (initial) relative positioning, the container squares essentially inherit their height from the parent .container, which doesn't have a height defined.

You can either give the parent .container a defined height, or alternatively, overflow: hidden.

Applying overflow: hidden to your .container fixes the problem, as can be seen in the following:

body {
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu', sans-serif;
  background-color: #393c42;
}

.container {
  margin: auto;
  max-width: 900px;
  overflow: hidden;
}

.header {
  min-height: 900px;
  background-color: #393c42;
  padding: 0;
  margin: 0;
}

.intro {}

.introduction {
  font-size: 50px;
  text-align: center;
  padding-top: 400px;
  font-family: 'Permanent Marker', sans-serif;
  color: #6bd3e5;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: #6bd3e5;
}

h2 {
  padding: 0;
  margin: 0;
}

.projectSquares {
  width: 40%;
  background: #333;
  padding-bottom: 30%;
  float: left;
  margin: 1%;
}

<div class="header">
  <div class="intro">
    <h2 class="introduction">Hello, I'm <br></h2>
  </div>
</div>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<div class="container">
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
</div>