Close toggle after opening

Just learning Bootstrap and I snagged a theme online and while working on the nav bar, found that the toggle button doesn't toggle back to close after being opened. I've done quite a bit of searching but have had a hard time finding anything that could help me... Attached is the code I am working on. Any and all help is appreciated.

<!doctype html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>CardSpoiler</title>
    <meta name="description" content="BlackTie.co - Free Handsome Bootstrap Themes" />
    <meta name="keywords" content="themes, bootstrap, free, templates, bootstrap 3, freebie,">
    <meta property="og:title" content="">

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link rel="prefetch" href="images/zoom.png">
  </head>
  <style>
    body {
      background: #232526;
      background: -webkit-linear-gradient(to right, #232526 , #414345);
      background: linear-gradient(to right, #232526 , #414345);
      margin: 0em;
      vertical-align: middle;
    }
    li { cursor: pointer; cursor: hand; }
    .navbar-toggle{
      background-color: #232526;
    }
  </style>
  <body>
    <div class="navbar navbar-fixed-top" data-activeslide="1">
      <div class="container">

        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>


        <div class="nav-collapse collapse navbar-responsive-collapse">
          <ul class="nav row">
            <li data-slide="1" class="col-12 col-sm-1"><a id="home" title="Home"><span class="icon icon-home"></span> <span class="text">Home</span></a></li>
            <li data-slide="2" class="col-12 col-sm-1"><a id="warrior" title="Warrior" class="external nav"><span class="icon icon-filter"></span> <span class="text">Warrior</span></a></li>
            <li data-slide="3" class="col-12 col-sm-1"><a id="druid" href="../../../CardSpoiler.html" title="Druid"><span class="icon icon-leaf"></span> <span class="text">Druid</span></a></li>
            <li data-slide="4" class="col-12 col-sm-1"><a id="priest" href="../../../CardSpoiler.html" title="Priest"><span class="icon icon-plus-sign"></span> <span class="text">Priest</span></a></li>
            <li data-slide="5" class="col-12 col-sm-1"><a id="paladin" href="../../../CardSpoiler.html" title="Paladin"><span class="icon icon-heart"></span> <span class="text">Paladin</span></a></li>
            <li data-slide="6" class="col-12 col-sm-1"><a id="hunter" href="../../../CardSpoiler.html" title="Hunter"><span class="icon icon-screenshot"></span> <span class="text">Hunter</span></a></li>
            <li data-slide="1" class="col-12 col-sm-1"><a id="mage" href="../../../CardSpoiler.html" title="Mage"><span class="icon icon-fire"></span> <span class="text">Mage</span></a></li>
            <li data-slide="2" class="col-12 col-sm-1"><a id="shaman" href="../../../CardSpoiler.html" title="Shaman"><span class="icon icon-tint"></span> <span class="text">Shaman</span></a></li>
            <li data-slide="3" class="col-12 col-sm-1"><a id="warlock" href="../../../CardSpoiler.html" title="Warlock"><span class="icon icon-user"></span> <span class="text">Warlock</span></a></li>
            <li data-slide="4" class="col-12 col-sm-1"><a id="rogue" href="../../../CardSpoiler.html" title="Rogue"><span class="icon icon-eye-close"></span> <span class="text">Rogue</span></a></li>
            <li data-slide="5" class="col-12 col-sm-1"><a id="minions" href="../../../CardSpoiler.html" title="Minions"><span class="icon icon-chevron-up"></span> <span class="text">Minions</span></a></li>
            <li data-slide="6" class="col-12 col-sm-1"><a id="spells" href="../../../CardSpoiler.html" title="Spells"><span class="icon icon-chevron-down"></span> <span class="text">Spells</span></a></li>
          </ul>
          <div class="row">
            <div class="col-sm-2 active-menu"></div>
          </div>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->
  </body>

  <!-- SCRIPTS -->
  <script src="js/html5shiv.js"></script>
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/jquery-migrate-1.2.1.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
  <script src="js/script.js"></script>

  <!-- fancybox init -->
  <script>
    $(document).ready(function(e) {
      var lis = $('.nav > li');
      menu_focus( lis[0], 1 );

      $(".fancybox").fancybox({
        padding: 10,
        helpers: {
          overlay: {
            locked: false
          }
        }
      });

    });

    document.getElementById("home").onclick = function () {
      location.href = "../../../CardSpoiler.html";
    };
    document.getElementById("warrior").onclick = function () {
      location.href = "../../../CardSpoiler_Warrior.html";
    };
    document.getElementById("druid").onclick = function () {
      location.href = "../../../CardSpoiler_Druid.html";
    };
    document.getElementById("priest").onclick = function () {
      location.href = "../../../CardSpoiler_Priest.html";
    };
    document.getElementById("paladin").onclick = function () {
      location.href = "../../../CardSpoiler_Paladin.html";
    };
    document.getElementById("hunter").onclick = function () {
      location.href = "../../../CardSpoiler_Hunter.html";
    };
    document.getElementById("mage").onclick = function () {
      location.href = "../../../CardSpoiler_Mage.html";
    };
    document.getElementById("shaman").onclick = function () {
      location.href = "../../../CardSpoiler_Shaman.html";
    };
    document.getElementById("warlock").onclick = function () {
      location.href = "../../../CardSpoiler_Warlock.html";
    };
    document.getElementById("rogue").onclick = function () {
      location.href = "../../../CardSpoiler_Rogue.html";
    };
    document.getElementById("minions").onclick = function () {
      location.href = "../../../CardSpoiler_MSOG_Minions.html";
    };
    document.getElementById("spells").onclick = function () {
      location.href = "../../../CardSpoiler_MSOG_Spells.html";
    };
  </script>
</html>

Upvotes: 2

Answers (1)

Praveen Kumar Purushothaman

Reputation: 167162

The problem was with the z-index of the .navbar-toggle. The list items had a bigger z-index, while the .navbar-toggle lacked it. Adding this to your CSS will work:

.navbar-toggle {
  z-index: 5;
}

Try playing around with Working JSBin.
To compare it with the original code you had, see Old Code.

Upvotes: 1

Close toggle after opening

Answers (1)

Related Questions