DEVHIDE
Login Or Sign up

Bootstrap 4 nav toggle button not working?

1.3k Views Asked by At

I am trying to build the responsive navbar using the bootstrap 4, where the navbar has display the toggle button if the size of screen reduces by certain pixels width, I am able to display the toggle button but i am not able to display the link items when i am clicking on toggle button i don't know why is this happening also i have tried the jquery script first followed by the bootstrap link, popper script and at last the bootstrap script but still it is not displaying nav items after clicking on toggle button can anyone help me with this.

here is the code i have added in header

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


    <title>Nav Bar</title>
</head>

here is the code i have added in my body

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">TarotByPoonam</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
           </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="#">Home</a>
           </li>
           <li class="nav-item">
              <a class="nav-link" href="#">Appointment</a>
           </li>
           <li class="nav-item">
                <a class="nav-link" href="#">Shopping</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">Feedback</a>
           </li>
           <li class="nav-item">
              <a class="nav-link" href="#">Photos</a>
           </li>
           <li class="nav-item">
              <a class="nav-link" href="#">About me</a>
           </li>
           <button type="submit" class="rounded btn btn-danger">Logout</button>
         </ul>
        </div>
       </div>
      </nav>
     <!-- jQuery library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <!-- Popper JS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> 
     </script>

     <!-- Latest compiled JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </body>
jquery css bootstrap-4 toggle jquery-mobile-navbar
Original Q&A
3

There are 3 best solutions below

0
On 

<!doctype html>
<htlm>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


    <title>Nav Bar</title>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">TarotByPoonam</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
           </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Appointment</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Shopping</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Feedback</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Photos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About me</a>
            </li>
            <button type="submit" class="rounded btn btn-danger">Logout</button>
          </ul>
        </div>
      </div>
    </nav>


    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
    </script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  </body>
</htlm>

0
On

You need to check that you are reading the documentation for the version that you are using. If you look here https://getbootstrap.com/docs/4.5/components/navbar/ (note the version in the URL) you will see the data attribute names did not include the 'bs-' portion, that was added in v5.

Change this:

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

To:

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

In your <button class="navbar-toggler"> change the toggle attribute from data-bs-toggle to data-toggle. Do the same with your target attribute and remove bs part from your data-bs-target

<!doctype html>
<htlm>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


    <title>Nav Bar</title>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">TarotByPoonam</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
           </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Appointment</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Shopping</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Feedback</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Photos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About me</a>
            </li>
            <button type="submit" class="rounded btn btn-danger">Logout</button>
          </ul>
        </div>
      </div>
    </nav>


    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
    </script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  </body>
</htlm>

Related Questions in JQUERY

Related Questions in CSS

Related Questions in BOOTSTRAP-4

Related Questions in TOGGLE

Related Questions in JQUERY-MOBILE-NAVBAR

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.