Bootstrap navbar collapse not expanding to show links of the menu

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>