Twitter Bootstrap Question posted in

Auto close Navbar when click on link (responsive mode)-Twitter bootstrap

$('.navbar-collapse a').click(function() {
  $(".navbar-collapse").collapse('hide');
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar navbar-default fixed-top navbar-expand-md navbar-light shadow-sm">
  <div class="container">

    <!--
<nav class="navbar navbar-default navbar-fixed-top rhgh-fixed-top">
  <div class="container">
    //-->

    <a class="navbar-brand" href="#home">
      <i class="fa fa-home"></i>&nbsp;Resthaven Guesthouse
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
      <!-- Left Side Of Navbar -->
      <ul class="navbar-nav mr-auto">
        <li class="dropdown nav-item">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-box-open"></i>&nbsp;Accommodation
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#budget-room"><i class="fa fa-shopping-cart"></i>&nbsp;Basic Room</a>
            <a class="dropdown-item" href="#standard-room"><i class="fa fa-coins"></i>&nbsp;Standard Room</a>
            <a class="dropdown-item" href="#luxury-room"><i class="fa fa-car"></i>&nbsp;Luxury Room</a>
            <a class="dropdown-item" href="#vip-room"><i class="fa fa-gem"></i>&nbsp;VIP Room</a>
            <a class="dropdown-item" href="#self-catering"><i class="fa fa-list-alt"></i>&nbsp;Self-Catering Units</a>
          </div>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#conference"><i class="fa fa-video"></i>&nbsp;Conference</a>
        </li>

        <li class="dropdown nav-item">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-spin fa-futbol"></i>&nbsp;Activities
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#lesotho"><i class="fa fa-globe-africa"></i>&nbsp;Lesotho</a>
            <a class="dropdown-item" href="#fly-fishing"><i class="fa fa-anchor"></i>&nbsp;Fly&nbsp;Fishing</a>
          </div>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#about"><i class="fa fa-info-circle"></i>&nbsp;About&nbsp;Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#gallery"><i class="fa fa-camera"></i>&nbsp;Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact"><i class="fa fa-phone"></i>&nbsp;Contact&nbsp;Us</a>
        </li>
      </ul>

      <!-- Right Side Of Navbar -->
      <ul class="navbar-nav mr-auto">
        <!-- Social networking Links -->
        <li class="nav-item"><a class="nav-link" href="#awards"><i class="fas fa-award"></i></a></li>
        <li class="nav-item"><a class="nav-link" href="https://www.facebook.com/resthavenmatatza/" target="_blank"><i class="fab fa-facebook"></i></a></li>
        <li class="nav-item"><a class="nav-link" href="https://www.google.com/maps/place/Resthaven+Guesthouse/@-30.344456,28.8098163,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x43d5e39a91a6224!8m2!3d-30.344456!4d28.812005?hl=en-GB" target="_blank"><i class="fab fa-google"></i></a></li>
        <li class="nav-item"><a class="nav-link" href="https://twitter.com/ResthavenGH" target="_blank"><i class="fab fa-twitter"></i></a></li>
      </ul>
    </div>
  </div>

</nav>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

So I’m trying to automatically close a bootstrap navbar on mobile devices when the user clicks a link, & came across the following link:

Auto close Navbar when click on link (responsive mode)

which kind of works however if the navbar has a dropdown menu, the example above seems to fall apart…

So my question is how would I achieve this when there are dropdown menu’s within the bootstrap 4.3.x navbar?

Ps. I’ve also tried the links mentioned below to no avail:

How to get responsive navbar menu to automatically close after anchor link clicked?

How to hide collapsible Bootstrap 4 navbar on click

Tags:

2

Answers


  1. 0

    UPDATE:

    You can Add ".single" class to every element which does not have any dropdown items then whenever someone clicks on the ".single" class you hide the menu.
    And whenever someone clicks on the ".dorpdown-item" you hide the menu again.

    Use following code:

       $( document ).ready(function() {
   
    $('.dropdown-item').click(function(){
     $('.navbar div').removeClass('show');
  });  
  $('.single').click(function(){
         $('.navbar div').removeClass('show');
  });
 
   });

    See this working fiddle https://jsfiddle.net/mayureshpitale/4udmxpth/18/

    Login or Signup to reply.
  2. 0

    this worked for me by adding data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse" to the span tag.inside anchor tag(Nav-Link) place the span tag
    you can see that in the code

         <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container">
                    <a class="navbar-brand" href="/">Navbar</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="/"><span data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse">Home</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#About"><span data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse">About</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#Contact"><span data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse">Contact</span></a>
                            </li>

                        </ul>
                    </div>
                </div>
            </nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search