forum

Home / DeveloperSection / Forums / Bootstrap Navbar toggle button not working

Ask Question

Bootstrap Navbar toggle button not working

Manish Kumar 1551 23-May-2018

when i shrink the window or open in mobile toogle works first time but second 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>
bootstrap html  bootstrap  css 
Updated on 06-Jun-2018
Manish Kumar

Manish Kumar

Follow

Can you answer this question?

Answer

2 Answers

Prakash nidhi Verma

Prakash nidhi Verma

06-Jun-2018

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 :)

Anonymous User

Anonymous User

24-May-2018

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>

Liked By