Bootstrap navbar collapse not working with bundled bootstrap files

Bootstrap navbar collapse not working with bundled bootstrap files - javascript

I want to include a navbar that I copied from the bootstrap example page in views of my asp.net application. The navbar is as follows,
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" asp-controller="Home" asp-action="Index">Bata</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
</li>
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a class="nav-link" asp-action="ListUsers" asp-controller="Admin">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="ListPurchases" asp-controller="Purchase">Purchases</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="ListCurrencies" asp-controller="Admin">Currency Management</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="List" asp-controller="unitItem">Inventory Management</a>
</li>
}
<li class="nav-item">
<a class="nav-link" asp-controller="Contact" action="Index">Contact</a>
</li>
</ul>
#await Component.InvokeAsync("CheckoutSummary")
#await Html.PartialAsync("LoginPartial")
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
The navbar displays properly but it will not collapse when the button is clicked. The button is getting the click event you can tell since the button turns orange.
I have bundled my bootstrap and js files like this and include the vendor files in the view.
{
"outputFileName": "wwwroot/vendor.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css.map",
"node_modules/bootstrap/dist/css/bootstrap.css.map",
],
"minify": { "enabled": true }
},
{
"outputFileName": "wwwroot/vendor.min.js",
"inputFiles": [
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map",
"node_modules/jquery/dist/jquery.min.js"
],
"minify": { "enabled": false }
}
]
Is there something I could be missing why the collapse button is not working?

It sounds like you are trying to copy the functionality of the last example on the navbar page. If so, it looks like you are missing some of their classes. try including them.
Here is the code from their example. For testing you could try starting with their example and slowly incorporate what you want to be in the navbar. This will help you figure out what you are missing.
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
https://getbootstrap.com/docs/4.0/components/navbar/#external-content

Related

Dropdown Menu inside Nav not working in Bootstrap 5

I have a bootstrap nav that is a collection of copied and pasted snippets from their website, but for some reason my dropdown nav doesn't drop anything down, and I'm a bit confused why it's wrong.
Here's what I have:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">CPM</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav me-auto">
<a class="nav-link" aria-current="page" href="{{ url_for('user.welcome') }}">Home</a>
</div>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Account
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="{{ url_for('user.welcome') }}">Settings</a></li>
</ul>
</li>
<a class="btn btn-outline-danger me-md-2" href="{{ url_for('user.logout') }}">Logout</a>
</ul>
</div>
</div>
</nav>
</div>
Most of this was snipped from the resource page for it in bootstrap's docs: https://getbootstrap.com/docs/5.0/components/navbar/
The href values come from my flask application. I imagine it's something small, but when I click on the Account button in the dropdown menu nothing drops down and I don't get to see the li for Settings.
I downloaded the main javascript and css file for bootstrap and am serving it locally.

Using <button> instead of <a>

I'm using ReactJS along with a Bootstrap Nav Bar. Bootstrap uses an <a> tag for the navigation buttons. I want the buttons to be able to scroll down to a different component on the page without using an href. I have a scrollFunction to scroll to a section depending on what was pressed. If I use the <a> tag and change it to a button type, the format is totally different and I lose the "active" page style along with the pointer when I hover over the button.
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Education <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
If I change the Education <a> tag to:
<button class="nav-link" type="button" onClick={()=>scrollFunc("education")} style={{background:"transparent", border:"none"}}>Education</button>
Then I will get this output.
Finally, if I change the Education to:
<a class="nav-link" type="button" onClick={()=>scrollFunc("education")} style={{background:"transparent", border:"none"}}>Education <span class="sr-only">(current)</span></a>
I will get this output:
I would like to get the output of the first picture, without the href. Also when I hover over I want the mouse icon to be a pointer like shown here:
Please help me do this, I am relatively new to Web Development.

Thank you #mega12345mega for the answer:
<a class="nav-link" onClick={()=>scrollFunc("education")} style={{cursor:"pointer"}}>Education <span class="sr-only">(current)</span></a>

Why doesn't my toggle work correctly when I use staticflies?

I am studying Django and found the following problem when using staticsfiles, the toggler that appears when the screen is reduced does not extend my bootstrap navbar, I did not find the error.
NOTE: the rest works, dropdown, navbar (css / js)
NOTE1: when I use CDN everything works, including the toggler
here are the excerpts that I call staticsfiles and the link to the complete project on github
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'staticfiles'),
)
scripts.html
{% load static %}
<script src="{% static 'jquery/dist/jquery.js' %}"></script>
<script src="{% static 'popper.js/dist/umd/popper.js'%}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Los Angeles Soccer Evolution</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="programsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Programs
</a>
<div class="dropdown-menu" aria-labelledby="programsDropdown">
<a class="dropdown-item" href="#">Lion Cubs</a>
<a class="dropdown-item" href="#">Evolution</a>
<a class="dropdown-item" href="#">Lions</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Summer Camp</a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="tournamentsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tournaments
</a>
<div class="dropdown-menu" aria-labelledby="tournamentsDropdown">
<a class="dropdown-item" href="#">3 vs 3</a>
<a class="dropdown-item" href="#">Futsal</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Schools</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
'''
[Projeto no Github][1]
[1]: https://github.com/ChenGit55/LASE

The problem is most likely caused because on your server you are loading jQuery 3.5.0 or higher and via the CDN you were loading jQuery 3.4.1. See issue #30553.
Try downloading jQuery 3.4.1 and using that. It looks like this will be fixed in Bootstrap 4.4.2

How to right align text in Navigation Bar - HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
So I just recently started practicing HTML and CSS on my own time. I just started building a website using bootstrap and I'm having trouble with this navigation bar: navbar You can find it on this webstie: https://getbootstrap.com/docs/4.0/components/navbar/
and scroll down to "Nav" (i dont know how to include HTML code here)
What I want to do is have the items "Home" "Features" "Pricing" and "Disabled" "Search" (A search bar that I will implement) floating to the right. Eventually I will have something like:
NavBar-----------------------------------------------------------------Home Features Pricing Disabled #Search
But I can't seem to do it. I've tried to use span tags, ul tags, I've tried to remove some div elements but nothing is working. Any help?
Also I have a question. If I put:
"Navbar"
inside a div, then it is still inline with the rest of the nav elements (Home, Pricing etc...) which are in a different div. How is that possible?
Aren't divs block elements?

Learn and use FlexBox
It is a very powerful css layout library that is supported by most browsers.
Check out an example here for the Nav Bar. There are many ways you can right align. One way is to have an empty element just to the left of the nav elements that takes up remaining space which pushes the elements all the way to the right.
To achieve this for the Bootstrap example
All I did was add
<div style="flex-grow: 1;"></div>
Right below
<div class="collapse navbar-collapse" id="navbarSupportedContent">
And right above
<ul class="navbar-nav mr-auto">

If you're only looking to use Bootstrap features, you can achieve this by wrapping your links with this:
<ul class="nav navbar-nav navbar-right">
<links>
</ul>
Without using bootstrap:
.align-left { float: left }
.align-right { float: right }
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="align-left">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse align-right" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
<div style="clear: both;"></div>
</nav>

You can use the class mr-auto to fix the elements to the right.
Your code will become :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>

Bootstrap Navbar Collapse not closing on Click

I'm using Bootstrap an it's collapsed Navbar on a one-page website together with a simple scrolling script, so if I click on a single link the page scrolls down to anchor - works great. However the Navbar does not collapse when I click on a link which covers a lot of content on mobile devices - you first have to click on the toggle which is annoying. I found out that it should help to add the data-toggle and data-target attributes to the links, but it doesn't work at all - where is my mistake?
NAVIGATION:
<nav class="navbar navbar-default mainbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle hvr-bounce-to-bottom" data- toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link1" class="navelement">Link 1</a></li>
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link2" class="navelement">Link 2</a></li>
</ul>
</div>
</nav>
UPDATE:
It's a Javascript problem. My smooth-scroll script causes an issue:
var corp = $("html, body");
$(".navelement").click(function() {
var flag = $.attr(this, "href");
corp.animate({
scrollTop: $(schild).offset().top - 60
}, 1600, function() {
window.location.hash = flag;
});
return false;
});
It's a pretty simple script, but I have no clue what to do with it to make the navbar collapse.

Using the above example, what worked for me was to add data-toggle="collapse" data-target=".navbar-collapse" to the outer div
<div class="collapse navbar-collapse" id="my-navbar-collapse">
<div class="collapse navbar-collapse" id="my-navbar-collapse" toggle="collapse" data-target=".navbar-collapse">
The entire menu looks like this with the change:
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<a class="navbar-brand" href="#">Main</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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" data-toggle="collapse" data-target=".navbar-collapse" >
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLink="/guitars">Guitars <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" routerLink="/nasa-image">NASA Image</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>

I know this is a bit late coming in however, even in Bootstrap 4.0.0-alpha.6; the navbar does NOT inherently close after a menu item selection. The docs at Bootsrap have gotten better - but there is NO clear-cut example on how to get the navbar to close after a new menu selection.
In your html file - you go to the target div for the collapse class - the div I'm sowing below came strait from the Bootstrap site - so nothing has changed on that note:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
You use that id to monitor if the navbar is expanded (out of collapsed mode), then I added a click event to the a.nav-links in the navbar that re-collapses the navbar:
$("#navbarSupportedContent").on('show.bs.collapse', function() {
$('a.nav-link').click(function() {
$("#navbarSupportedContent").collapse('hide');
});
});

I would recommend following this a little bit closer to help you out.
http://getbootstrap.com/components/#navbar
Seems to be what you are basing it off of.
Mainly, when you look # that link, look at the first button line that you have and compare as that is your main drop down on the mobile version which takes up lots of screen real estate as you mentioned.
<nav class="navbar navbar-default mainbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle hvr-bounce-to-bottom collapsed" data-toggle="collapse" data-target="#my-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="my-navbar-collapse">
<ul class="nav navbar-nav">
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link1" class="navelement">Link 1</a></li>
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link2" class="navelement">Link 2</a></li>
</ul>
</div>
</nav>
1) I changed this part data- toggle="collapse" to data-toggle="collapse". There was just an extra space on line 3.
2) I added an id to your drop down instead of a class to identify more particularly (may not matter) and also changed the name to "my-navbar-collapse" This change was made on lines 3 and 11. Also this previously means you were just using the same class twice on the same element which didn't make sense.
3) I added the class "collapsed" into your class on line 3 located after "hvr-bounce-to-bottom" Should allow it to be collapsed by default, and only show if it is opened by the user.
That should help fix it as it cleans it up. Also, do you have a drop down in your nav bar that needs to be brought back up when you toggle other than the main button you listed? Doesn't seem so as of yet, just asking to make sure it's clear.

This works for me:
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});

The only problem with the solution above and the JSFiddle (jsfiddle.net/camdixon/v2gosj5s) is that when you are not on a mobile device, and the menu is not collapsed, the menu items blink. E.g. they collapse in place and reopen in place.
To repeat: expand the window of the JSFiddle result so that the menu is not collapsed, then click on a navbar item.
I've sort of solved the issue in addition to the JSFiddle version by altering the collapse data api in bootstrap.js as follows:
//Bootstrap v3.3.4
//line 662:
Collapse.prototype.toggle = function () {
//Added code:
var mq = window.matchMedia('screen and (min-width: 768px)')
if (mq.matches) return
//End added code
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
I'd rather not hardcode the min-width, but don't yet know how I would access the media query values in the css (see #screen-sm-min in less).

$(document).ready(function () {
$(".navbar-nav li.trigger-collapse a").click(function(event) {
$(".navbar-collapse").collapse('hide');
});
});

This small jquery snippet works in this way:
If navbar is expanded, nothing happens, so no blink (normal bootstrap behavior).
If navbar is collapsed, after a click event, closes the navbar.
Works on bootstrap 4
$(".navbar a").click(function(event) {
// check if window is small enough so dropdown is created
var toggle = $(".navbar-toggler").is(":visible");
if (toggle) {
$(".navbar-collapse").collapse('hide');
}
});
.wrapper {
height: 400px;
}
#div1 {
background-color: #73683b;
}
#div2 {
background-color: #B0A084;
}
#div3 {
background-color: #E9E6FF;
}
#div4 {
background-color: #B3679B;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container px-0">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mx-0">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#div1">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#div2">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#div3">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#div4">Link 4</a>
</li>
</div>
</nav>
</div>
<div class="container wrapper d-flex flex-column justify-content-center" id="div1">
<p class="text-center">DIV 1</p>
</div>
<div class="container wrapper d-flex flex-column justify-content-center" id="div2">
<p class="text-center">DIV 2</p>
</div>
<div class="container wrapper d-flex flex-column justify-content-center" id="div3">
<p class="text-center">DIV 3</p>
</div>
<div class="container wrapper d-flex flex-column justify-content-center" id="div4">
<p class="text-center">DIV 4</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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>

You just need to add data-toggle and data-target in navbar code. Where class="collapse navbar-collapse navbar-collapse is used.
<div class="collapse navbar-collapse navbar-collapse" data-toggle="collapse" data-target="#navbar-collapse">
Home (current)
Guitars (current)
Dropdown
NASA Image
Another action
Something else here
Disabled

Just use span tag and add data-bs-toggle="collapse"` data-bs-target=".navbar-collapse" to each links. Finally this worked in my project.
<NavLink exact="true" className="nav-link" to="/">`<span data-bs-toggle="collapse"` data-bs-target=".navbar-collapse">Home</span></NavLink>

Just use span tag and add data-bs-toggle="collapse"` data-bs-target=".navbar-collapse" and place that span tag in anchor tag. below is 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>

In my case, the tabs had weird behavior and didn't close due to my vue :class bindings
<router-link class="nav-link text-light" :class="{active: checker}" to="/ideas">
This variant works
<router-link class="nav-link text-light" to="/ideas">

Develop Reference

JavaScript is the programming language of the Web.

Bootstrap navbar collapse not working with bundled bootstrap files - javascript

Related

Dropdown Menu inside Nav not working in Bootstrap 5

Using <button> instead of <a>

Why doesn't my toggle work correctly when I use staticflies?

How to right align text in Navigation Bar - HTML

Bootstrap Navbar Collapse not closing on Click

Categories

Resources