Bootstrap 4 - hiding navbar collapse works, but links aren't working

Question

I have a navbar that collapses to a mobile menu when the screen width decreases to a point, and the default behavior doesn't hide the menu after selecting a nav link, which ends up in content on the page being hidden.

I found this answer for someone else who was trying to get it to automatically hide, so I added data-toggle="collapse" data-target=".nav-collapse.show" to my <a> tags which causes the menu to close on click, however now it does not follow the links and update the url anymore.

Even this link for Bootstrap 4 from the answer linked above doesn't work properly, and will automatically close the menu, but the href="#whatever" is completely ignored.

In the codeply example above, when the <a> tag looks like this:

<a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>

it will hide the collapsed menu after, but the url http://www.codeply.com/api/run in the demo window will not change.

However when the <a> tag doesn't have data-toggle="collapse" data-target=".navbar-collapse.show" like this:

<a class="nav-link" href="#about-us">About</a>

the url in the demo window will be updated to http://www.codeply.com/api/run#about-us, but the menu will no longer hide after selection.

Other answers like this one that I have found for similar problems tell people to add Javascript instead of editing the html, but being new to Bootstrap, I have absolutely no clue where to put the Javascript.

The browser I am currently trying this on is Chromium on Linux.

How do I get the menu to hide on click, and have the links actually be followed?

Edit: Here is my full code as requested (I edited out my personal information):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!--<link rel="icon" href="../../favicon.ico">-->

    <title>Portfolio</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="style.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#menuNavbar" aria-controls="menuNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">My Portfolio</a>

        <div class="collapse navbar-collapse" id="menuNavbar">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#" data-toggle="collapse" data-target="#menuNavbar.show">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about" data-toggle="collapse" data-target="#menuNavbar.show">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#skills" data-toggle="collapse" data-target="#menuNavbar.show">Skills/knowledge</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="portfolio-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Portfolio</a>
                    <div class="dropdown-menu" aria-labelledby="portfolio-dropdown">
                        <a class="dropdown-item" href="https://github.com/username/repo1">repo1</a>
                        <a class="dropdown-item" href="https://github.com/username/repo2">repo2</a>
                        <a class="dropdown-item" href="https://github.com/username/repo3">repo3</a>
                        <a class="dropdown-item" href="#portfolio" data-toggle="collapse" data-target="#menuNavbar.show">More</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#resume" data-toggle="collapse" data-target="#menuNavbar.show">Résumé</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact" data-toggle="collapse" data-target="#menuNavbar.show">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container">

        <div class="introduction" id="home">
            <h1>My Portfolio</h1>
            <p class="lead">Placeholder text</p>
        </div>

        <div class="about-me" id="about">
            <h2>About Me</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula viverra metus. Etiam in vestibulum ipsum, ac dignissim libero. Morbi vel tortor hendrerit, mattis nunc ut, ornare dolor. Ut porttitor, augue in pellentesque facilisis, massa mauris faucibus lorem, eget tincidunt nisi massa sit amet urna. Donec eu libero vel nisl tempor ultrices at at diam. Cras pellentesque non purus vel consectetur. Sed eget molestie leo. Ut scelerisque nibh non tortor congue, non suscipit augue congue. Nunc suscipit libero accumsan facilisis vulputate. Etiam ornare, felis sit amet feugiat rhoncus, est nulla pellentesque mauris, eu vulputate est lectus vel diam. Maecenas vel congue ipsum. Etiam scelerisque, dolor eu mattis aliquam, nibh lacus finibus lectus, quis tempus dui turpis nec purus. Curabitur vel tortor ipsum. Maecenas lacinia porttitor molestie. Ut pulvinar dolor at risus consectetur pulvinar. Fusce posuere mauris ut dui scelerisque vulputate.</p>
        </div>

        <div class="skills-knowledge" id="skills">
            <h2>Skills and Knowledge</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam quam, consectetur volutpat nibh at, sagittis mollis nulla. Nunc id porta ante. Donec auctor, lorem eu efficitur dignissim, elit nulla congue ante, congue facilisis augue erat id risus. Nulla facilisi. Ut vitae consequat erat. Morbi volutpat sem vitae ex mattis molestie tristique vitae magna. Phasellus egestas rhoncus justo quis tincidunt. Nunc sed enim congue, posuere lectus et, placerat tortor. Aliquam purus orci, pharetra a tortor vel, posuere vehicula ipsum.</p>
        </div>

        <div class="portfolio" id="portfolio">
            <h2>Portfolio</h2>
            <p class="lead">Some projects I have worked on can be found on my <a href="https://github.com/username">GitHub</a>.</p>
        </div>

        <div class="resume" id="resume">
            <h2>Résumé</h2>
            <p class="lead">A link to my résumé will be here in the future.</p>
        </div>

        <div class="contact-info" id="contact">
            <h2>Contact Info</h2>
            <p class="lead">My phone number and email will be here in the future.</p>
        </div>

    </div><!-- /.container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="js/bootstrap.js"></script>
</body>
</html>

I am currently mobile, I will add my code to the question as soon as I can. — PhantomWhiskers, Apr 26 '17 at 04:40
@athimohan I have added my html file with some minor edits to remove my personal information. — PhantomWhiskers, Apr 26 '17 at 04:57

score 0 · Answer 1 · answered Sep 14 '17 at 19:12

In the bootstrap.js (and obvs the collapse.js too) there is this code block:

$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
    event.preventDefault();
    var target = Collapse._getTargetFromElement(this);
    var data = $(target).data(DATA_KEY);
    var config = data ? 'toggle' : $(this).data();

    Collapse._jQueryInterface.call($(target), config);
  });

If you comment out 'event.preventDefault();' your links will work and the navbar will still collapse...

I realise that this is probably sacrilege and a horrible idea buuuuuuut I have yet to encounter problems which follow from this...

sorry, should have mentioned that this is Bootstrap v4.0.0-alpha.6 — AlexJeffcott, Sep 14 '17 at 19:14

score 0 · Answer 2 · answered Feb 18 '20 at 20:15

Create a own javascript file for your extention of bootstrap. Example init.js include it both after bootstrap.js and jquery and do some stuff init .. hope its help other

$(document).on('click','.navbar-collapse.show',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});

Bootstrap 4 - hiding navbar collapse works, but links aren't working

2 Answers2