title: How to fix images floating over navbar while scrolling?
body: <p>Long story short, I've been working on this site for my exam. Everything was good until I started making a gallery. The problem isn't the gallery itself, it's the navbar, I have no idea how can i fix this. Anyways, when I scroll down to my gallery the photos don't just hide under the navbar, they go over it. Same thing happens for the jumbotron that I have, the text goes over it as well. </p>
  
  <p>Here's my HTML</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-sm bg-dark navbar-dark"&gt;
      &lt;ul class="navbar-nav"&gt;
          &lt;li class="nav-item dropdown"&gt;
              &lt;a class="nav-link dropdown-toggle" href="#"
                  id="navbardrop" data-toggle="dropdown"&gt; Daugiau &lt;/a&gt;
                  &lt;div class="dropdown-menu"&gt;
                      &lt;a class="dropdown-item" href="#"&gt; ****** &lt;/a&gt;
                  &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="nav-item yes"&gt;
              &lt;a class="nav-link" href="#"&gt; ****** &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt; ****** &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;&lt;s&gt; ****** &lt;/s&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div class="gal"&gt;
      &lt;div class=" text-center py-3"&gt;
          &lt;h5&gt; ... &lt;/h5&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-2 col-md-12 mb-4"&gt;
                  &lt;div class="view overlay z-depth-1-half"&gt;
                      &lt;img src="******.jpg" class="img-fluid"
                          alt=""&gt;
                      &lt;a href=""&gt;
                          &lt;div class="mask rgba-white-light"&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-2 col-md-6 mb-4"&gt;
                  &lt;div class="view overlay z-depth-1-half"&gt;
                      &lt;img src="******.jpg" class="img-fluid"
                          alt=""&gt;
                      &lt;a href=""&gt;
                          &lt;div class="mask rgba-white-light"&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-2 col-md-6 mb-4"&gt;
                  &lt;div class="view overlay z-depth-1-half"&gt;
                      &lt;img src="******.jpg" class="img-fluid"
                          alt=""&gt;
                      &lt;a href=""&gt;
                          &lt;div class="mask rgba-white-light"&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-2 col-md-12 mb-4"&gt;
                  &lt;div class="view overlay z-depth-1-half"&gt;
                      &lt;img src="******.jpg" class="img-fluid"
                          alt=""&gt;
                      &lt;a href=""&gt;
                          &lt;div class="mask rgba-white-light"&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-2 col-md-6 mb-4"&gt;
                  &lt;div class="view overlay z-depth-1-half"&gt;
                      &lt;img src="******.jpg" class="img-fluid"
                          alt=""&gt;
                      &lt;a href=""&gt;
                          &lt;div class="mask rgba-white-light"&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-2 col-md-6 mb-4"&gt;
                  &lt;div class="view overlay z-depth-1-half"&gt;
                      &lt;img src="******" class="img-fluid"
                          alt=""&gt;
                      &lt;a href=""&gt;
                          &lt;div class="mask rgba-white-light"&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=" text-center py-3"&gt;
          &lt;button class="clearbtn" type="button" onclick="daugiau1()"&gt; ****** &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's my CSS</p>
  
  <pre><code>.jumbotron {
    background-image: url('index_jt.jpg');
    height:300px;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform .2s;
    border-bottom: 2px solid black;
    color: black;
  }
  .jumbotron .container {
    position:relative;
    top:50px;
    transition: transform .2s;
  } 
  .navbar {
      position: fixed;
      top: 0px;
      width: 100%;
      height: 100px;
      background-color: black !important;
  }
  .navbar-nav {
      text-align: center;
  }
  .jumbotron:hover {
      transform: scale(1.01);
  }
  .nav-item {
      transition: transform .2s;
  }
  .nav-item:hover {
      transform: scale(1.05);
  }
  </code></pre>
  
  <p>I know it's a lot but I would really appreciate some help.</p>