导航栏问题从引导3到4

Question

请看一下codepen https://codepen.io/ScottMarshall/pen/JoGWEX中的这段代码，当我将bootstrap 4应用于这段代码时，它会变形。我试图找出这段代码中从引导程序3到4的更改，但我无法做到。另外，当我携带任何内容时，它就会被Navbar覆盖。我希望导航栏不覆盖其下方的内容。另外，如果可以的话，您能告诉我如何使它成为粘性导航栏吗？

$( "li" ).hover(
  function() {
      $(this).find("span").stop().animate({
      width:"100%",
      opacity:"1",
    }, 400, function () {
    })
  }, function() {
      $(this).find("span").stop().animate({
      width:"0%",
      opacity:"0",
    }, 400, function () {
    })
  }
);

body{
  background:#192226 !important;
}

.navbar-inverse{
  background:#222B31 !important;
  border-bottom:4px solid #EE445F !important;
}

.navbar-brand{
  font:12px Lato !important;
  text-transform:uppercase;
  color:#FFF !important;
  letter-spacing:2px;
  margin-top:2px;
}

.nav{
  margin-bottom:0px;
  a{
    font:500 11px Lato;
    letter-spacing:2px;
    padding:16px !important;
    color:#a3bfc6 !important;
    text-transform:uppercase;
    position:relative;
    z-index:1000;
  }
  a:hover{
    color:#FFF !important;
  }
  li{
    position:relative;
  }
}

.navbar-inverse .navbar-toggle{
  border:none;
}

.navbar-collapse{
  box-shadow:none !important;
  border:none !important;
}

.navbar-inverse .navbar-toggle:hover{
  background:transparent !important;
}

.navbar-inverse .navbar-toggle:focus{
  background:transparent !important;
}

.navbar-inverse .navbar-toggle:active{
  background:transparent !important;
}

.icon-bar{
  background:#a3bfc6 !important;
}

.hover{
  display:block;
  position:absolute;
  width:0%;
  height:100%;
  top:0px;
  left:0px;
  background:#EE445F !important;
  z-index:0;
  opacity:0;
}

@media (max-width: 767px) {
.nav{
  padding-bottom:20px;
  a{
    padding:12px !important;
  }
}
}

@media (max-width: 480px) {
  .nav{
    padding-bottom:20px;
  }
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Animated Bootstrap Nav</a>
    </div>

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="#">About</a><span class="hover"></span></li>
      <li><a href="#">Services</a><span class="hover"></span></li>
      <li><a href="#">Portfolio</a><span class="hover"></span></li>
      <li><a href="#">Blog</a><span class="hover"></span></li>
      <li><a href="#">Contact</a><span class="hover"></span></li>
    </ul>
  </div>
  </div>
</nav>