CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Hugo
Hugo

Reputation: 59

Navbar with two collapse menus

I have made a navbar using the code given in a topic with two collapse menus but when one is active and then open the second, the collapsed content of the second is added at the end of the content of the first one. How can I close the other menu when we open the second ? 

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  /* Vertically center the text there */
  background-color: #AD2D2D;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One&amp;subset=latin-ext" rel="stylesheet">

<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<body style="background-color:#E5E5E5;">
  <header>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
      <a class="navbar-brand" href="#" style="font-family: 'Fjalla One', sans-serif;">Site.com</a>
      <!-- links toggle -->
      <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
      <!-- account toggle -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-user"></i></button>
      <div class="collapse navbar-collapse" id="links">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active"><a class="nav-link" href="#">Link 1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 4</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 5</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Other</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Dropdown 1</a>
              <a class="dropdown-item" href="#">Dropdown 2</a>
              <a class="dropdown-item" href="#">Dropdown 3</a>
            </div>
          </li>
        </ul>
      </div>
      <div class="collapse navbar-collapse" id="account">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <footer class="footer"></footer>
</body>

Upvotes: 0

Views: 1392

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362380

Add handlers for the collapse show event like this...

$('#links').on('show.bs.collapse', function () {
  $('#account').collapse("hide");
})
$('#account').on('show.bs.collapse', function () {
  $('#links').collapse("hide");
})

https://www.codeply.com/go/iBT3FzY4a2

Upvotes: 1

Related Questions