Bootstrap全屏手机菜单

Question

我想在移动视图中点击菜单图标时创建全屏叠加导航。我可以点击导航，或者我可以获得叠加但我无法覆盖整个屏幕（在li，徽标和菜单图标后面）。请帮助。

＆＃13;

＆＃13;

/* fade in and out quotes */
$(document).ready(function() {
  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(3500)
      .delay(4500)
      .fadeOut(3500, showNextQuote);
  }
  showNextQuote();
});
/* cross Menu icon Click */
$(".navbar-toggle").on("click", function() {
  $(this).toggleClass("active");
  $('.navbar-header').toggleClass("active");
});
/* closes nav after click */
$(document).ready(function() {
  $(".navbar-nav li a").click(function(event) {
    $(".navbar-collapse").collapse('hide');
  });
});

＆＃13;

body {
  height: 100%;
}
body {
  font-family: 'Londrina Solid', cursive;
  font-size: 1.2em;
  letter-spacing: 0.15em;
  color: #323232;
  width: 100%;
}
a,
a.active,
a:active,
a:focus,
a:hover {
  outline: 0;
  text-decoration: none;
  cursor: pointer
}
p {
  padding-top: 2em;
  color: #999;
}
/* N A V - B A R */

.navbar {
  margin-bottom: 0;
  border: none;
  height: 15em;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 3.5em;
  height: 0.25em;
  border-radius: 0.015em;
  margin-bottom: 0.7em;
}
.icon-bar {
  margin-top: 0.5em;
  background: #999;
}
.navbar ul {
  padding: 1em;
  padding-top: 0.5em;
}
.navbar ul li a {
  font-weight: 300;
  font-size: 1.8em;
  letter-spacing: 0.1em;
  color: #999;
  padding-left: 0.5em;
}
.navbar ul li a:hover {
  background: transparent;
  color: #0684C4;
}
.navbar-header.active {
  background: #48d991;
  min-height: 100vh;
}
/* B A C K G R O U N D  A N I M A T I O N */

header {
  height: 100vh;
}
#holder {
  position: absolute;
  top: 80%;
}
.text-change {
  position: absolute;
  top: 23%;
  color: #fff;
  font-size: 3.3em;
  font-weight: 100;
  margin-bottom: 9em;
  padding-bottom: 9em;
}
.quotes {
  display: none;
}
#top-page {
  height: 100vh;
  animation: colorchange 45s infinite;
  /*  duration in seconds*/
  -webkit-animation: colorchange 45s infinite;
  /* Chrome and Safari */
}
@keyframes colorchange {
  0% {
    background: #48d991;
  }
  25% {
    background: #6FCCD4;
  }
  50% {
    background: #0684C4;
  }
  75% {
    background: #F499A2;
  }
  100% {
    background: #48d991;
  }
}
/* Safari and Chrome - necessary duplicate */

@-webkit-keyframes colorchange {
  0% {
    background: #48d991;
  }
  25% {
    background: #6FCCD4;
  }
  50% {
    background: #0684C4;
  }
  75% {
    background: #F499A2;
  }
  100% {
    background: #48d991;
  }
}
/* B U T T O N  A N I M A T I O N */

#holder a.btn:link,
a.btn:visited {
  position: relative;
  display: block;
  width: 190px;
  margin: 1em auto 0;
  padding: 14px 15px;
  border: 0.3em solid #999;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 1.5em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: .10em;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
#holder a.btn:link:after,
a.btn:visited:after {
  content: "";
  position: absolute;
  background: none repeat scroll 0 0 #999;
  height: 0%;
  left: 50%;
  top: 50%;
  width: 100%;
  z-index: -1;
  -webkit-transition: all .3s ease 0s;
  -moz-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}
#holder a.btn:link:hover,
a.btn:visited:hover {
  color: #48d991;
  text-shadow: none;
}
#holder a.btn.btn-fom:after {
  width: 0%;
  border-radius: 50%;
  opacity: .5;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
#holder a.btn.btn-fom:hover:after {
  height: 450%;
  width: 110%;
  opacity: 1;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#top-page">
        <img src="#" class="img-responsive logo-img" alt="branding-logo">
      </a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="services.html">Services</a>
        </li>
        <li><a href="packages.html">Packages</a>
        </li>
        <li><a href="blog.html">Blog</a>
        </li>
        <li><a href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- Background changing -->
<header>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-offset-2 col-sm-8 text-change">
        <p class="quotes">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <p class="quotes">Facilis dolorem impedit, cupiditate vero consequuntur sit alias quia quas, reiciendis.</p>
        <p class="quotes">Reiciendis debitis error laborum dolorum quos, cumque esse tempore eius suscipit facere.</p>
      </div>
    </div>
    <!-- /row -->
  </div>
  <!-- /container-fluid -->
  <div class="container-fluid">
    <div class="row">
      <div id="holder" class="col-xs-12">
        <a href="#" class="btn btn-fom page-scroll">More here</a>
      </div>
    </div>
    <!-- /row -->
  </div>
  <!-- /container-fluid -->
</header>

＆＃13;

＆＃13;

＆＃13;