---
title: "Bootstrap Navbar toggle button not working"  
description: "Bootstrap Navbar toggle button not working"  
author: "Manish Kumar"  
published: 2018-05-23  
updated: 2018-06-06  
canonical: https://www.mindstick.com/forum/34491/bootstrap-navbar-toggle-button-not-working  
category: "bootstrap"  
tags: ["html", "bootstrap", "css"]  
reading_time: 2 minutes  

---

# Bootstrap Navbar toggle button not working

when i shrink the [window](https://www.mindstick.com/forum/161285/how-does-the-window-console-object-work-in-javascript) or open in [mobile](https://www.mindstick.com/articles/310668/reasons-why-you-should-choose-custom-mobile-app-development-for-your-business) toogle works first time but [second](https://answers.mindstick.com/qa/41761/how-did-the-second-industrial-revolution-influence-women-s-roles-in-society) time it does not work

```
<button type="button"
        class="navbar-toggle"
        data-toggle="collapse"
        data-target=".navbar-collapse">

    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="">Page 1</a>
        </li>
        <li>
            <a href="">Page 2</a>
        </li>
        <li>
            <a href="">Page 3</a>
        </li>
    </ul>
```

## Replies

### Reply by Prakash nidhi Verma

You need to first check your bootstrap library and other frame work library which is used by you.

you can use this library below shown..

```
<!DOCTYPE html>  //doctype for HTML5<html lang="en"><head>  <title>Bootstrap</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body>
```

you can use your buttons like as a button group.

you should use this code..

```
<ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>      <li><a href="#">Page1</a></li>      <li><a href="#">Page2</a></li>      <li><a href="#">Page3</a></li>    </ul>
```

Happy coding :)

### Reply by Anonymous User

You need to check jquery and bootstrap js library is added or not and it should be in same order as shown below

```
<html>   <head>           <link rel="stylesheet" href=""/>    </head>   <body>
    // note jquery tag has to go before boostrap      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
   </body></html>
```


---

Original Source: https://www.mindstick.com/forum/34491/bootstrap-navbar-toggle-button-not-working

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
