CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4twitter-bootstrap-4
marcvs
marcvs

Reputation: 97

Closing an open collapsed navbar when clicking outside in Booststrap 4

I'm currently using Bootstrap 4 and I would like to close a collapsed navbar when clicking outside. It can only be close when you click the toggle button.

Also, there's a problem with the nav-links when I'm clicking the toggle button. After it opens, nav-links are bouncing up. I'm not able to figure out the cause. Kindly please someone help me with my problem. Thank you!

Here's my code: 

<body>
 <!--  start navbar -->
 <nav class="navbar navbar-light bg-faded navbar-fixed-top">
  <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
    <a class="navbar-brand" href="#"></a>

    <div class="collapse navbar-toggleable-md" id="main-navbar">
      <ul class="nav navbar-nav float-lg-right">
        <li class="nav-item">
          <a class="nav-link" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section-about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section-portfolio">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section-contact">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#resume">Resume</a>
        </li>
      </ul>
    </div>
  </nav>
  <!--   end navbar -->
</body>

Here's my codepen link:

http://codepen.io/marcvs/pen/jVONGM

Upvotes: 0

Views: 3541

Answers (2)

wisnia
wisnia

Reputation: 85

I know it's an old topic but I just stumbled upon it and figured I can update the solution a little bit:

$(document).click(event => {
  const isNavbarOpened = $("#navbar.navbar-collapse").hasClass("collapse show");

  // this way, if the navbar is not opened, we don't perform unnecessary operations
  if (isNavbarOpened) {
    const clickedElement = $(event.target);
    const clickedInsideNavbar = clickedElement.closest('nav.navbar').length > 0;

    if (!clickedInsideNavbar) {
      $("button.navbar-toggler").click();
    }
  }
});

Upvotes: 0

DokiCRO
DokiCRO

Reputation: 4705

Here is solution to your problem:

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".collapse").hasClass("collapse in");

        if (_opened === true && !clickover.hasClass("navbar-toggler")) {
            $("button.navbar-toggler").click();
        }
    });
});

Codepen: http://codepen.io/anon/pen/xgbmqr

Its a modified version of this answer

Upvotes: 2

Related Questions