CODEWITHSUNDEEP
htmltwitter-bootstrapbootstrap-4
Aman Sharma
Aman Sharma

Reputation: 27

Why is the toggle button of this Bootstrap navbar not working?

I am trying to create bootstrap navbar, but the toggle button does not work. I have used the class .sidebar-collapse on body tag, so the data should appear on the right side when I click on the toggle button. But this does not happen. Can someone tell me what is wrong with my code?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"> 
</script>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/now-ui-kit.css" type="text/css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- 
awesome.min.css" rel="stylesheet" integrity="sha384- 
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
crossorigin="anonymous">
<title>
    Techversity
</title>
</head>
<body class="sidebar-collapse">
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
    <div class="navbar-translate">
        <a class="navbar-brand" href="#pablo">
           Techversity
       </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" 
data-toggle="collapse" data-target="#navigation" aria-controls="navigation- 
index" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-bar bar1"></span>
        <span class="navbar-toggler-bar bar2"></span>
        <span class="navbar-toggler-bar bar3"></span>
    </button>

    </div>

    <div class="collapse navbar-collapse justify-content-end" 
 id="navigation">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#pablo">
                    Home
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#pablo">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#pablo">Disabled</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#pablo"><i class="fa fa-instagram" 
aria-hidden="true"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#pablo"><i class="fa fa-youtube- 
play" aria-hidden="true"></i></a>
            </li>
        </ul>
    </div>
</div>
</nav>
</body>
</html>

Upvotes: 2

Views: 2909

Answers (3)

Jordy
Jordy

Reputation: 1967

After struggling for many hours, I just realized the possibility of Bootstrap Toggle not working:

  1. jquery.min.js hasn't been imported in html file
  2. jquery.min.js has been imported, but it is placed at the header tag instead of at the bottom of the body tag.

Upvotes: 0

Javier Ca&#241;on
Javier Ca&#241;on

Reputation: 162

i cant see bootstrap.min.js in your code: https://getbootstrap.com/docs/4.0/getting-started/introduction/

Upvotes: 1

amedina
amedina

Reputation: 3476

The markup is not correct. There shouldn't be a div.container nor a div.navbar-translate element inside the nav.navbar element. I tried it without them and it works. Also, you can check here that the markup isn't the one expected by Bootstrap.

Upvotes: 1

Related Questions