1

I'm having an issue with the Bootstrap 4 navbar. I'm not able to close the it back when <a> inside the <li> tag is clicked.

When I used data-toggle="collapse" data-target=".navbar-collapse.show" inside the <a> tag it works, but the tag <a href=''> does not follow the link.

Tried Using jQuery to target the <a> tag inside the <li>, but it doesn't work as well. Here is my code:

HTML:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">

    <span class="navbar-text">&nbsp;</span>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse collapse hide" id="navbarMenu">                     
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#sec-1" class="nav-link">link 1</a></li>
            <li class="nav-item"><a href="#sec-2" class="nav-link">link 2</a></li>
            <li class="nav-item"><a href="#sec-3" class="nav-link">link 3</a></li>
        </ul>
    </div>
</nav>

JavaScript:

<script>
    $('.navbar-nav>li>a').on('click', function(){
        $('.navbar-collapse').collapse('hide');
    });
</script>
stasiaks
  • 1,268
  • 2
  • 14
  • 31
Sharbel El Hajj
  • 21
  • 6

1 Answers1

1

What about following the link via javascript once it has been clicked.

$(document).on('click', '.navbar-nav>li>a', function(event){
    $('.navbar-collapse').collapse('hide');
    window.location.href = $(event.currentTarget).attr('href');
});

Here a working jsfiddle based on the above example.

Bernhard
  • 4,855
  • 5
  • 39
  • 70