Bootstrap Navbar. When I Press the Button Nothing Happens

Bootstrap Navbar. When I press the button nothing happens

What is missing is a reference to jquery.js. I created jsfiddle to demonstrate it.

Please note that you need to reference jquery.js before referecing bootstrap.js

Your html head should look like:

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">  </script>

Hope this works

Bootstrap Navbar toggle button not working

Your code looks great, the only thing i see is that you did not include the collapsed class in your button selector. http://www.bootply.com/cpHugxg2f8
Note: Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

<div class="navbar-wrapper">
      <div class="container">

        <nav class="navbar navbar-inverse navbar-static-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse 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>
            </div>
          </div>
        </nav>

      </div>
    </div>

Bootstrap navbar collapse toggle button not clicking

In first, you need to append links to jQuery and bootrstrap.js to your page. In second, data-target="#navbar=in-collapse" should be replaced by data-target="#navbar-in-collapse". See the and run the snippet below.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">    <div class="container">        <div class="navbar-header page-scroll">            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-in-collapse" aria-expanded="false" aria-controls="navbar">                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>            <a class="navbar-logo page-scroll" href="#about">                <img src="icon.png" />Page            </a>        </div>
        <div class="collapse navbar-collapse" id="navbar-in-collapse">            <ul class="nav navbar-nav navbar-right">                <li class="hidden active">                    <a href="#page-top"></a>                </li>                <li class="">                    <a class="page-scroll" href="#portfolio">Portfolio</a>                </li>                <li className="">                    <a class="page-scroll" href="#blog">Blog</a>                </li>                <li class="">                    <a class="page-scroll" href="#contact">Contact</a>                </li>            </ul>        </div>    </div></nav>

Bootstrap button and navigation bar not working

Try the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" 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>
          <a class="navbar-brand" href="#">SITE NAME/LOGO</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">HEADING1<span class="sr-only">(current)</span></a></li>
            <li><a href="#">HEADING2</a></li>
            <li><a href="#">HEADING3</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">HEADING4<span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">
                <li><a href="#bmiform">SomeThing</a></li>
                <li><a href="#">SomeThingElse</a></li>
                <li><a href="#">SomeThingElse</a></li>
                <li class="divider"></li>
                <li><a href="#">SomeThingElse</a></li>
                <li class="divider"></li>
                <li><a href="#">SomeThingElse</a></li>
              </ul>

            </li>
          </ul>

          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Search</button>
          </form>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">SomeThingElse</a></li>
          </ul>

        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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

  </body>
</html>

It is also better practice to use bootstrap from its online source. It makes your site faster because other sites request the same resource and it so it is stored in browsers cache.

Bootstrap is a good tool and can make building websites alot faster and easier.

Bootstrap Navbar collapse button not working on click

Replace data-target=".navbar-brand-centered" with data-target="#navbar-brand-centered". You need # to refer to an id, . refers to a class.

Bootstrap navbar toggle not working

You are probably not including the necessary resources (javascript files).

try adding these lines to your code

in your head section of the html page add:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
">

Before you close the body tag add this:

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Bootstrap responsive navbar toggle button not working

BOOTSTRAP DOCUMENTATION

https://getbootstrap.com/docs/5.0/getting-started/introduction/

Many of our components require the use of JavaScript to function.
Specifically, they require our own JavaScript plugins and Popper.
Place one of following s near the end of your pages, right
before the closing tag, to enable them.

Remember that Bootstrap depends on Jquery and Popper.js for their dynamic functionality.

I do not see Popper.js in your scripts files, try including it.

https://popper.js.org/

Bootstrap Navbar. When I Press the Button Nothing Happens