Bootstrap Navbar toggle button not working

Total Post:52

Points:366
 574  View(s)
Ratings:
Rate this:

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>
  1. Post:4

    Points:28
    Re: Bootstrap Navbar toggle button not working

    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>

  1. Post:140

    Points:984
    Re: Bootstrap Navbar toggle button not working

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

      Modified On Jun-06-2018 04:40:29 AM

Answer