CODEWITHSUNDEEP
jquerycssdjangobootstrap-4navbar
Hektar
Hektar

Reputation: 71

Bootstrap hamburger menu not expanding

I'm getting back into web development using Django after quite some time and I've got the seemingly common issue of my bootstrap hamburger menu not expanding in my nav bar. It's driving me absolutely nuts. It was working fine, then I did some refactoring and it's no longer working. I can't seem to find the issue, I've tried switching out the bootstrap links with ones found here, confirming the ID matches etc but no avail. Any help is greatly appreciated.

Scripts from Bootstrap:

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <title>Title</title>
    ...
            <!-- Optional JavaScript -->
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        </body>

HTML:

<nav id="bootstrap-override-customnav" class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
    <a class="navbar-brand" href="{% url 'home'%}">
        <img src="{% static 'images/logo.png'%}" alt="" width="40" height="40">
    </a>
    <button class="navbar-toggler navbar-dark" 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" href="{% url 'home'%}">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'interactivequery'%}">Interactive Query Tool</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'education'%}">Education</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'about'%}">About</a>
            </li>
        </ul>
        <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Diamond ID" aria-label="Search">
            <button class="btn btn-outline-success customnavbtn" type="submit">Search</button>
        </form>
    </div>
</div>

CSS:

nav .container-fluid .navbar-brand {
color:#3282b8;
font-family: 'Roboto', sans-serif;

}

nav .container-fluid .navbar-brand:hover {
color:#3282b8;
}

nav .d-flex .customnavbtn {
    background-color:#1b262c;
    color:#F2F2F2;
    border-color:#F2F2F2;
    font-family: 'Roboto', sans-serif;
}

nav .d-flex .customnavbtn:hover{
    background-color:#bbe1fa;
    color:#1b262c;
    font-family: 'Roboto', sans-serif;
}
 
nav .d-flex .customnavbtn:focus {
    box-shadow: none;
    background-color:#bbe1fa;
    color:#1b262c;
    border-color: #F2F2F2;
}

#bootstrap-override-customnav{
    background:#1b262c;
}

.navbar-nav .nav-item .nav-link {
    color:#F2F2F2;
    font-family: 'Roboto', sans-serif;
}

.navbar-nav .nav-item .nav-link:hover {
    color:#bbe1fa;
    font-family: 'Roboto', sans-serif;
}

.navbar-nav .nav-item .nav-link:focus {
    color:#bbe1fa;
    box-shadow: none;

}

Upvotes: 0

Views: 1851

Answers (1)

ThamerGuissi
ThamerGuissi

Reputation: 36

I think that the problem is that you're using the new v5 version of bootstrap while using the old javascript file v4.3.1. bootstrap no longer needs jQuery to work Try implementing this instead

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

Upvotes: 2

Related Questions