1

$('.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

Tim Kruger
  • 863
  • 2
  • 10
  • 26

2 Answers2

6

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>
Jamiu S.
  • 5,257
  • 5
  • 12
  • 34
nikhil arutla
  • 71
  • 1
  • 1
2

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/

Mayuresh
  • 70
  • 1
  • 7
  • this doesn't work as it doesn't allow me to select an option of the dropdown before automatically closing the navbar in the case of the Accommodation or Activities dropdown in the navbar, & just closes the navbar without giving me a chance to select an item first. – Tim Kruger Mar 13 '21 at 14:36
  • @TimothyKruger I have updated the answer and its working as per your need! – Mayuresh Mar 13 '21 at 15:04
  • thanks dude that seems to be working as expected. Appreciate your help ;-). – Tim Kruger Mar 13 '21 at 15:20