My Bootstrap navbar works, but the navbar won't collapse automatically when clicked, I need to press the hamburger option again to close it

user_13727262 0
Viewed 642

I have been using Bootstrap to set up my first site and my navbar works perfectly well as a navigation bar. However, when the page is small enough for it to convert to a hamburger menu, on selection of a link it navigates me to the right place but the bar doesn't hide until I press the hamburger again.

I assume its because I'm not using the right JQuery or Bootstrap script (this is what most commonly seems to be the fix) but as far as I can tell with my very beginner knowledge its the most up-to-date version.

I have been looking at past answers and played around with the code but haven't been able to work out the issue.

Any thoughts?

HTML in head

  <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


<!--Custom CSS-->
<link rel="stylesheet" href="style.css">

HTML for navbar

 <!--navbar-->
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#jill">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#training">Training and Experience</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#sessions">Sessions and Fees</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#contact">Contact Me</a>
            </li>
        </ul>
        <span class="navbar-text">
            Here for you when you need it most
        </span>
    </div>
</nav>

HTML Scripts at bottom of page

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->


<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
</script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<!--smooth scroll-->
<script src="js/smooth-scroll.polyfills.min.js"></script>
<script>
    $(document).on('click', 'a.nav-link', function(event) {
        event.preventDefault();
        console.log("CLICKED ANCHOR!");

        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top - $(".navbar.sticky-top").height()
        }, 500);
    });

</script>
nav bootstrap-4 html jquery
2 Answers

Bootstrap adds the "show" class on clicking the hamburger. So to close the menu after clicking on an anchor tag all you have to do is add this (Look at jsfiddle for placement in your code):

    $( '#navbarText a' ).on('click', function(){
        $('#navbarText').removeClass('show');
    });

Demo: https://jsfiddle.net/Lgh761kd/

user_72350980

If you're searching for an equivalent of @FreedomInChaos's answer for react-bootstrap, you can use collapseOnSelect:

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">

It is very important to mention that in order to make it work, you also need to include eventKey="1" (1,2,3...) on every Nav.Link that should trigger the collapse (check the example below):

<Navbar collapseOnSelect expand="lg">
    <Navbar.Brand as={Link} to="/">
      Feelings Aveiro Apartment
    </Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="ml-auto">
        <Nav.Item>
          <Nav.Link eventKey="1" as={Link} to="/">
            {t("home")}
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="2" as={Link} to="/availability">
            {t("availability")}
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="3" as={Link} to="/photos">
            {t("photos")}
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="4" as={Link} to="/map">
            {t("map")}
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Dropdown
            style={{ color: "#bbb" }}
            onSelect={eventKey => {
              const { code, title } = countries.find(({ code }) => eventKey === code)
              setAppLanguage(eventKey)
            }}
          >
            <Dropdown.Toggle variant="secondary" id="dropdown-flags" className="text-left" style={{ width: 50 }}>
              {toggleContents}
            </Dropdown.Toggle>

            <Dropdown.Menu>
              {countries.map(({ code, title }) => (
                <Dropdown.Item key={code} eventKey={code}>
                  <FlagIcon code={code} /> {title}
                </Dropdown.Item>
              ))}
            </Dropdown.Menu>
          </Dropdown>
        </Nav.Item>
      </Nav>
    </Navbar.Collapse>
  </Navbar>

In this example, this was done for all Nav.Link except the language drop-down, as we don't want the collapse to happen on the first click (present different languages) but only on the second one.

user_32318840
Related