Bootstrap navbar collapse not expanding to show links of the menu - html

Question

I built a django website with bootstrap template. Somehow, when the size of the website is in mobile format the expand menu feature of the navber is not expanding to show the links/items of the navbar.
Can somehow say how to fix this?
.nosh_color {
font-family: sans-serif;
font-size: 21px;
color: #5c39f9;
}
.nosh_text_color {
font-family: sans-serif;
color: #5c39f9;
}
.header_color {
color: #333333 !important;
}
.grey_color {
color: #6f6f6f;
}
.fa {
padding: 9px;
font-size: 21px;
width: 33px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3b5998;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #212529;
color: white;
text-align: center;
}
<link rel="canonical" href="https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<link rel="icon" href="/media/blog_images/nosh-white-short.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="https://nosh.tech/">
<img src="/media/blog_images/nosh-white.png" width="79" alt="" />
</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 mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/"><div class="nosh_color">articles</div></a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/contact"><div class="nosh_color">contact us</div></a>
</li>
</ul>
</div>
</div>
</nav>

Answer 1

The problem is the lack of js plugin in the code. Add these two script tags:
This is jQuery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This is bootstrap:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
Run snippet:
.nosh_color {
font-family: sans-serif;
font-size: 21px;
color: #5c39f9;
}
.nosh_text_color {
font-family: sans-serif;
color: #5c39f9;
}
.header_color {
color: #333333 !important;
}
.grey_color {
color: #6f6f6f;
}
.fa {
padding: 9px;
font-size: 21px;
width: 33px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3b5998;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #212529;
color: white;
text-align: center;
}
<link rel="canonical" href="https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<link rel="icon" href="/media/blog_images/nosh-white-short.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="https://nosh.tech/">
<img src="/media/blog_images/nosh-white.png" width="79" alt="" />
</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 mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/"><div class="nosh_color">articles</div></a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/contact"><div class="nosh_color">contact us</div></a>
</li>
</ul>
</div>
</div>
</nav>