Nav Bar Toggle Button - Won't dropdown-Twitter bootstrap

swamptiger24
October 28, 2021
247 views
2 votes
3 Answers

I have a Django homepage that has a Bootstrap navbar, and when resized I have it show a toggle button. My issue is that when this toggle button comes into effect, I cannot dropdown the navbar items? I am unsure how I can fix this.

Snip of what these look like (for an idea):
https://imgur.com/a/PyiUs38
This is my imports:

Pastebin: https://pastebin.com/QqPiyVxf

    <!-- BOOTSTRAP CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- SCRIPTS -->
    <script src="https://kit.fontawesome.com/879dc93f9e.js" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!--LOGO-->
  <a class="navbar-brand" style="pointer-events: none">
    <!-- Unclickable -->
    <img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
  </a>

  <!--MAIN NAV-->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
    {% with request.resolver_match.url_name as url_name %}
    <ul class="navbar-nav">
      <li class="nav-item {% if url_name == 'home' %}active{% endif %}">
        <a class="nav-link" href="{% url 'home' %}">Home</a>
      </li>
      <li class="nav-item {% if url_name == 'about' %}active{% endif %}">
        <a class="nav-link" href="{% url 'about' %}">About</a>
      </li>
      <li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
        <a class="nav-link" href="{% url 'projects' %}">Projects</a>
      </li>
      <li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
        <a class="nav-link" href="{% url 'uses' %}">Uses</a>
      </li>
      <li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
        <a class="nav-link" href="{% url 'contact' %}">Contact</a>
      </li>
    </ul>
    {% endwith %}
  </div>

  <!--SOCIALS-->
  <!-- Twitter -->
  <a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
    <i class="fab fa-twitter"></i>
  </a>
  <!-- LinkedIn -->
  <a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
    <i class="fab fa-linkedin-in"></i>
  </a>
  <!-- Github -->
  <a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
    <i class="fab fa-github"></i>
  </a>
</nav>

These are my scripts at the bottom of the body:

<!-- SCRIPTS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Answers

- TrevorJohnson
- October 28, 2021 at 7:14 am
- 0 votes
0
Does the html file link to the Bootstrap JavaScript dependency? It is required for navbars.

Login or Signup to reply.

Include following JS libraries into your template file, right before the closing body tag,

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Updated Working Snippet with Bootstrap 5.1 version

Bootstrap 5.1

I did following changes in your code

I used Bootstrap 5.1 version
I changed following attributes in button element

data-toggle="collapse" 
data-target="#navbarTogglerDemo02"

Changed to

data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"

Please check the following working snippet

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!--LOGO-->
  <a class="navbar-brand" style="pointer-events: none">
    <!-- Unclickable -->
    <img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
  </a>

  <!--MAIN NAV-->
  
  <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarTogglerDemo02"
      aria-controls="navbarTogglerDemo02"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
    {% with request.resolver_match.url_name as url_name %}
    <ul class="navbar-nav">
      <li class="nav-item {% if url_name == 'home' %}active{% endif %}">
        <a class="nav-link" href="{% url 'home' %}">Home</a>
      </li>
      <li class="nav-item {% if url_name == 'about' %}active{% endif %}">
        <a class="nav-link" href="{% url 'about' %}">About</a>
      </li>
      <li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
        <a class="nav-link" href="{% url 'projects' %}">Projects</a>
      </li>
      <li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
        <a class="nav-link" href="{% url 'uses' %}">Uses</a>
      </li>
      <li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
        <a class="nav-link" href="{% url 'contact' %}">Contact</a>
      </li>
    </ul>
    {% endwith %}
  </div>

  <!--SOCIALS-->
  <!-- Twitter -->
  <a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
    <i class="fab fa-twitter"></i>
  </a>
  <!-- LinkedIn -->
  <a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
    <i class="fab fa-linkedin-in"></i>
  </a>
  <!-- Github -->
  <a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
    <i class="fab fa-github"></i>
  </a>
</nav>
      
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Updated Working Snippet with Bootstrap 3.4.1 version

Note: Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin. Thant’s mean you have to call dropdown via javascript

Ex:

// Call the dropdowns via JavaScript___
$('.dropdown-toggle').dropdown();

Please check the following working snippet

$('.dropdown-toggle').dropdown();

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!--LOGO-->
  <a class="navbar-brand" style="pointer-events: none">
    <!-- Unclickable -->
    <img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
  </a>

  <!--MAIN NAV-->
  
  <button
      type="button" 
      class="dropdown-toggle" 
      id="dropdownMenu1" 
      data-toggle="dropdown" 
      aria-haspopup="true" 
      aria-expanded="true"
    >
      <span class="navbar-toggler-icon"></span>
</button>
      
  <div class="collapse navbar-collapse justify-content-md-center dropdown-menu" id="navbar" aria-labelledby="dropdownMenu1">
    {% with request.resolver_match.url_name as url_name %}
    <ul class="navbar-nav">
      <li class="nav-item {% if url_name == 'home' %}active{% endif %}">
        <a class="nav-link" href="{% url 'home' %}">Home</a>
      </li>
      <li class="nav-item {% if url_name == 'about' %}active{% endif %}">
        <a class="nav-link" href="{% url 'about' %}">About</a>
      </li>
      <li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
        <a class="nav-link" href="{% url 'projects' %}">Projects</a>
      </li>
      <li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
        <a class="nav-link" href="{% url 'uses' %}">Uses</a>
      </li>
      <li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
        <a class="nav-link" href="{% url 'contact' %}">Contact</a>
      </li>
    </ul>
    {% endwith %}
  </div>

  <!--SOCIALS-->
  <!-- Twitter -->
  <a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
    <i class="fab fa-twitter"></i>
  </a>
  <!-- LinkedIn -->
  <a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
    <i class="fab fa-linkedin-in"></i>
  </a>
  <!-- Github -->
  <a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
    <i class="fab fa-github"></i>
  </a>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Reference Link (My Another Stack Overflow Answer): https://stackoverflow.com/a/69763221/3073842

Please signup or login to give your own answer.

Click here to cancel reply.

Nav Bar Toggle Button – Won't dropdown-Twitter bootstrap

Answers