Bootstrap导航栏坏了

Question

我目前的代码存在问题。我在移动设备上查看我的网站时设置了一个下拉菜单。下拉菜单有一个开放和关闭功能，但由于某种原因，它一直显示两个汉堡菜单。我附上了两张照片，描绘了它应该看起来的样子，第二张是双层菜单，彼此相邻。所以我要求帮助来解决这个问题并让它只显示导航栏上的一个汉堡包菜单而不是两个。这是它应该看的正确方式，Correct Navbar Version和导航栏错误{{ 3}}

我的HTML代码是

＆＃13;

＆＃13;

var toggle_button = $("<a>", {
  id: "toggle-btn",
  html: "Menu",
  title: "Menu",
  href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function(e) {
  e.preventDefault();
  nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function() {
  if (toggle_button.is(':visible')) nav.addClass('mobile');
  else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function() {
  if (nav.hasClass('mobile')) nav.fadeOut('fast');
});
setTimeout(function() {
  $('h1.responsive-headline').fitText(1.2, {
    minFontSize: '25px',
    maxFontSize: '40px'
  });
}, 100);

$('.smoothscroll').on('click', function(e) {
  e.preventDefault();
  var target = this.hash,
    $target = $(target);
  $('html, body').stop().animate({
    'scrollTop': $target.offset().top
  }, 800, 'swing', function() {
    window.location.hash = target;
  });
});
// Navbar wrap
var sections = $("section"),
  navigation_links = $("#nav-wrap a");
sections.waypoint({
  handler: function(event, direction) {
    var active_section;
    active_section = $(this);
    if (direction === "up") active_section = active_section.prev();
    var active_link = $('#nav-wrap a[href="#' + active_section.attr("id") + '"]');
    navigation_links.parent().removeClass("current");
    active_link.parent().addClass("current");
  },
  offset: '35%'
});

＆＃13;

header {
  height: 54px;
  width: 100%;
  background: #13171B;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
}
header .logo {
  margin-left: 36px;
  margin-right: 20px;
  margin-top: 09px;
  float: left;
  width: auto;
  z-index: 991;
  position: relative;
}
header .logo a {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  width: 125px;
  height: 140px;
}
header .header-social {
  font-size: 20px;
  font-weight: normal;
  line-height: 54px;
  color: #424a56;
  margin: 0 10px 0 0;
  padding: 0;
  float: right;
}
header .header-social li {
  display: inline-block;
  margin-right: 20px;
}
header .header-social li a {
  color: #fff;
}
header .header-social li a:hover {
  color: #0ac578;
}
#nav-wrap,
#nav-wrap ul,
#nav-wrap li,
#nav-wrap a {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
#nav-wrap {
  font: 11px'montserrat-regular', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  float: left;
  display: inline-block;
}
#nav-wrap > a {
  display: none;
}
ul#nav {
  min-height: 54px;
  width: auto;
  text-align: left;
}
ul#nav li {
  position: relative;
  list-style: none;
  height: 54px;
  display: inline-block;
}
ul#nav li a {
  display: inline-block;
  padding: 8px 8px;
  line-height: 38px;
  text-decoration: none;
  text-align: left;
  color: #c0cdd1;
  -webkit-transition: color .2s ease-in-out;
  -moz-transition: color .2s ease-in-out;
  -o-transition: color .2s ease-in-out;
  -ms-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
}
ul#nav li a:hover {
  color: #fff;
}
ul#nav li a:active {
  background-color: transparent !important;
}
ul#nav li.current a {
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
  <div class="logo">
    <a class="smoothscroll" href="index.html">
      <img alt="" src="images/Nav-ThinkTrends.png">
    </a>
  </div>
  <nav id="nav-wrap">
    <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
    <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a> 
    <ul id="nav" class="menu-main">
      <li><a href="about.html">About</a>
      </li>
      <li><a class="smoothscroll" href="#features">Features</a>
      </li>
      <li><a href="main-blog.html">Case Studies</a>
      </li>
      <li><a href="demo.html">Sign Up</a>
      </li>
      <li><a href="main-blog.html">Blog</a>
      </li>
    </ul>
  </nav>
  <!-- end #nav-wrap -->
  <ul class="header-social">
    <li><a href="#"><i class="fa fa-facebook"></i></a>
    </li>
    <li><a href="https://twitter.com/Think_Trends"><i class="fa fa-twitter"></i></a>
    </li>
    <li><a href="#"><i class="fa fa-instagram"></i></a>
    </li>
    <li><a href="#"><i class="fa fa-google-plus"></i></a>
    </li>
  </ul>
</header>

＆＃13;

＆＃13;

＆＃13;