Error with Sticky Navbar

Question

I have a problem related to Sticky Nav, basically it works and is even beautiful, but when inserting the bootstrap it overwrites Sticky, I was only able to fix removing the bootstrap and doing everything from the site in css. But I would like to increase the bootstrap. I’m already 4 hours breaking my head, if anyone can help me, I thank you already.

Follow the HTML code:

// Menu-toggle button

$(document).ready(function() {
  $(".menu-icon").on("click", function() {
    $("nav ul").toggleClass("showing");
  });
});

// Scrolling Effect

$(window).on("scroll", function() {
  if ($(window).scrollTop()) {
    $('nav').addClass('black');
  } else {
    $('nav').removeClass('black');
  }
})

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: lighter;
}

header {
  width: 100%;
  height: 100vh;
  background: url(design.png) no-repeat 50% 50%;
  background-size: cover;
}

.div1 {
  width: 100%;
  height: 100vh;
  background: url(after4.jpg) no-repeat 50% 50%;
  background-size: cover;
}

.div2 {
  width: 100%;
  height: 100vh;
  background: url(hero.jpg) no-repeat 50% 50%;
  background-size: cover;
}

.content {
  width: 94%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}

.logo {
  line-height: 60px;
  position: fixed;
  float: left;
  margin: 16px 46px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}

img {
  height: 150px;
  width: 150px;
  margin-top: 80px;
}

.img2 {
  height: 100%;
  width: 100%;
}

.img-circle {
  border-radius: 50%;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 60px;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #000;
}

nav ul li {
  display: inline-block;
  padding: 16px 40px;
  ;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

@media(max-width: 786px) {
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }
  nav ul {
    max-height: 0px;
    background: #000;
  }
  nav.black ul {
    background: #000;
  }
  .showing {
    max-height: 34em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    text-align: center;
  }
  .menu-icon {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <header>
    <nav>
      <div class="menu-icon">
        <i class="fa fa-bars fa-2x"></i>
      </div>
      <div class="logo">LOGO
      </div>

      <div class="menu">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="#">menu1</a>
          </li>
          <li><a href="#">menu2</a></li>
          <li><a href="#">menu3</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <div id="team" class="team">
    <div class="container">
      <div class="row">
        <h2 class="wow rubberBand">Serviços</h2>
        <div class="col-lg-3 col-md-3 wow fadeInLeft" data-wow-delay="1.5s">
          <img src="" class="img-circle" alt="">
          <h4>Texto1</h4>
          <p>texto informativo.</p>
        </div>
        <div class="col-lg-3 col-md-3  wow fadeInLeft" data-wow-delay="1.2s">
          <img src="" class="img-circle" alt="">
          <h4>texto2</h4>
          <p>texto informativo</p>
        </div>
        <div class="col-lg-3 col-md-3  wow fadeInLeft" data-wow-delay="0.8s">
          <img src="" class="img-circle" alt="">
          <h4>texto3</h4>
          <p>texto informativo</p>
        </div>
        <div class="col-lg-3 col-md-3  wow fadeInLeft" 0.5>
          <img src="" class="img-circle" alt="">
          <h4>texto4</h4>
          <p>texto sobre a foto.</p>
        </div>
      </div>
    </div>
  </div>

Imagery:

Answer 1

It seems your problem is in the z-index of nav. Add z-index: 9; in nav that the bar will overwrite the rest of the content:

nav {
  position: fixed;
  width: 100%;
  line-height: 60px;
  z-index: 9;
}

See working with Bootstrap 4:

// Menu-toggle button

$(document).ready(function() {
  $(".menu-icon").on("click", function() {
    $("nav ul").toggleClass("showing");
  });
});

// Scrolling Effect

$(window).on("scroll", function() {
  if ($(window).scrollTop()) {
    $('nav').addClass('black');
  } else {
    $('nav').removeClass('black');
  }
})

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: lighter;
}

header {
  width: 100%;
  height: 100vh;
  background: url(design.png) no-repeat 50% 50%;
  background-size: cover;
}

.div1 {
  width: 100%;
  height: 100vh;
  background: url(after4.jpg) no-repeat 50% 50%;
  background-size: cover;
}

.div2 {
  width: 100%;
  height: 100vh;
  background: url(hero.jpg) no-repeat 50% 50%;
  background-size: cover;
}

.content {
  width: 94%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}

.logo {
  line-height: 60px;
  position: fixed;
  float: left;
  margin: 16px 46px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}

img {
  height: 150px;
  width: 150px;
  margin-top: 80px;
}

.img2 {
  height: 100%;
  width: 100%;
}

.img-circle {
  border-radius: 50%;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 60px;
  z-index: 9;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #000;
}

nav ul li {
  display: inline-block;
  padding: 16px 40px;
  ;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

@media(max-width: 786px) {
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }
  nav ul {
    max-height: 0px;
    background: #000;
  }
  nav.black ul {
    background: #000;
  }
  .showing {
    max-height: 34em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    text-align: center;
  }
  .menu-icon {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="wrapper">
  <header>
    <nav>
      <div class="menu-icon">
        <i class="fa fa-bars fa-2x"></i>
      </div>
      <div class="logo">LOGO
      </div>

      <div class="menu">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="#">menu1</a>
          </li>
          <li><a href="#">menu2</a></li>
          <li><a href="#">menu3</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <div id="team" class="team">
    <div class="container">
      <div class="row">
        <h2 class="wow rubberBand">Serviços</h2>
        <div class="col-lg-3 col-md-3 wow fadeInLeft" data-wow-delay="1.5s">
          <img src="" class="img-circle" alt="">
          <h4>Texto1</h4>
          <p>texto informativo.</p>
        </div>
        <div class="col-lg-3 col-md-3  wow fadeInLeft" data-wow-delay="1.2s">
          <img src="" class="img-circle" alt="">
          <h4>texto2</h4>
          <p>texto informativo</p>
        </div>
        <div class="col-lg-3 col-md-3  wow fadeInLeft" data-wow-delay="0.8s">
          <img src="" class="img-circle" alt="">
          <h4>texto3</h4>
          <p>texto informativo</p>
        </div>
        <div class="col-lg-3 col-md-3  wow fadeInLeft" 0.5>
          <img src="" class="img-circle" alt="">
          <h4>texto4</h4>
          <p>texto sobre a foto.</p>
        </div>
      </div>
    </div>
  </div>