Bootstrap navbar toggler not working

Hello everyone,

I have been trying to get a navbar toggler working but have not managed to be successful.

I have followed the bootstrap tutorial here and the w3schools tutorial here.

I see these codes apply the exact same mechanic and have tried to apply it to my webpage. When I reduce the window size the button appears as it should. However when I click it nothing happens.

Does anyone have an idea whats wrong ? My django code produces the following webpage:

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="Mechanics%20-%20Homepage_files/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <script defer="defer" src="Mechanics%20-%20Homepage_files/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    
        <!-- Custom styles for this template -->
        <link href="Mechanics%20-%20Homepage_files/main.css" rel="stylesheet" type="text/css">

        
            <title>Mechanics - Homepage</title>
        
    </head>
    <body>
        <header class="site-header">
            <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
                <div class="container">
                    <a class="navbar-brand mr-4" href="http://127.0.0.1:8000/">Mechanics</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarToggle">
                        <div class="navbar-nav mr-auto">
                            <a class="nav-item nav-link" href="http://127.0.0.1:8000/">Home</a>
                            <a class="nav-item nav-link" href="http://127.0.0.1:8000/blog/">News</a>
                            <a class="nav-item nav-link" href="http://127.0.0.1:8000/book/">Book</a>
                            <a class="nav-item nav-link" href="http://127.0.0.1:8000/solver/">Solver</a>
                            <a class="nav-item nav-link" href="http://127.0.0.1:8000/about/">About</a>
                        </div>
                        <div class="navbar-nav ms-auto">
                            <a class="nav-item nav-link" href="#">Login</a>
                            <a class="nav-item nav-link" href="#">Register</a>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
        
        <main role="main" class="container">
            
    <h1>Home page</h1>

        </main>
    
</body></html>

My django code looks like this:

{% load static %}
<!doctype html>
<html lang="en">
    <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.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

        <!-- Custom styles for this template -->
        <link href="{% static "main.css" %}" rel="stylesheet" type="text/css" >

        {% if title %}
            <title>Mechanics - {{ title }}</title>
        {% else %}
            <title>Mechanics</title>
        {% endif %}
    </head>
    <body>
        <header class="site-header">
            <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
                <div class="container">
                    <a class="navbar-brand mr-4" href="/">Mechanics</a>
                    <button id="button" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarToggle">
                        <div class="navbar-nav mr-auto">
                            <a class="nav-item nav-link" href="{% url "blog-front" %}">Home</a>
                            <a class="nav-item nav-link" href="{% url "blog-blog" %}">News</a>
                            <a class="nav-item nav-link" href="{% url "book-home" %}">Book</a>
                            <a class="nav-item nav-link" href="{% url "solver-home" %}">Solver</a>
                            <a class="nav-item nav-link" href="{% url "blog-about" %}">About</a>
                        </div>
                        <div class="navbar-nav ms-auto">
                            <a class="nav-item nav-link" href="#">Login</a>
                            <a class="nav-item nav-link" href="#">Register</a>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
        
        <main role="main" class="container">
            {% block basis %}{% endblock basis %}
        </main>
    </body>
</html>

This is what my webpage looks like:


and in small form like this:

However, clicking the button does nothing.

What us going on ? :frowning:

I can’t be sure, but if you look at the example in the Bootstrap 5.2 docs

Instead of as you have it in your code data-target='#navbarToggle', the data property in the docs example is called data-bs-target e.g. data-bs-target='#navbarToggle'

The same applies to data-toggle='collapse'data-bs-toggle='collapse'

I could be wrong.

2 Likes

Looks like the navbar html is bootstrap4 but you are linking to bootstrap5 files.

They are not compatible.

2 Likes

If you put your code in a bootstrap4 set up then the nav works but if you are using bootstrap5 you will need the changes that @rpg_digital suggests above,

e.g.

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">

It all depends on what version you’ve been using to build the rest of the page whether you switch or not.

2 Likes

Hello everyone.

Wow how could I just have glanced over that for like 5 times. unbelievable.

Thanx a million!

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.