html - 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/[email protected]/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>

question from:https://stackoverflow.com/questions/65911507/bootstrap-navbar-collapse-not-expanding-to-show-links-of-the-menu

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/[email protected]/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/[email protected]/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/[email protected]/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>