Nav-Collapse Not Working [Twitter Bootstrap]

Twitter bootstrap navbar collapse function not working

If you are not using twitter bootstrap's javascript then you can use angular-ui bootstrap's collapse directive to collapse your navbar. Just make sure to put an ng-click directive on the .navbar-toggle button to negate the current value of the collapse variable. Add another ng-click to the .navbar-collapse element to collapse the navbar when a link has been clicked.

Here's a DEMO

    <body ng-click="collapse = false">
      <div class="navbar navbar-default" ng-click="$event.stopPropagation()">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" 
                        ng-click="collapse = !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">
                        Title
                    </a>
                </div>

                <div class="collapse navbar-collapse" 
                    ng-controller="HeaderController"
                    collapse="!$parent.collapse" ng-click="$parent.collapse = false">
                    <ul class="nav navbar-nav navbar-right">
                       <li><a href="">link</a></li>
                    </ul>
                </div>
            </div>
        </div>
      </body>

UPDATE:

1 I noticed that you have an ng-controller within the .navbar-collapse item, since an ng-controller creates a child scope, you have to use collapse="!$parent.collapse" and ng-click="$parent.collapse = false" within that element itself. The plunker has been updated above, check it out.

2 As a side note, you can take it a step further and add an ng-click="collapse = false" within your html body to collapse the navbar when the user clicks outside of the navbar, just make sure to add ng-click="$event.stopPropagation()" to the .navbar element to avoid collapsing it while the user is clicking the .navbar-toggle.

Navbar collapse is not working in Bootstrap

Try this.. i have just added ul and li to your code to show visible effect you can use your code section there..

<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><link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbar-wrapper">        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">                <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" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a>                </div><!-- navbar-header -->                <div class="navbar-collapse collapse">                    <ul class="nav navbar-nav">                        <li>                            <a href="">First Menu Item</a>                        </li>                        <li>                            <a href="">Second Menu Item</a>                        </li>                        <li>                            <a href="">Third Menu Item</a>                        </li>                    </ul>                </div><!-- collapse nav-->            </div><!-- container -->
        </div><!-- navbar -->    </div>

Bootstrap 5 Nav-bar collapse does not work

You have to change the data-toggle to data-bs-toggle and use data-bs-target attribute. Add the ID in the collapse div. That's all.

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapse">

Bootstrap navbar content not showing when collapsed

Here you go...

Change:

data-toggle="collapse" (Bootstrap 4) to data-bs-toggle="collapse" (Bootstrap 5)
data-target="#navbarNav" (Bootstrap 4) to data-bs-target="#navbarNav" (Bootstrap 5)

#navbarLogo {
  width: 10rem;
  height: auto;
}

.navbar-brand img {
  height: 50px;
  width: auto;
  padding-left: 30px;
}

#linkText {
  font-family: hdFontMedium;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

#navbarNav {
  justify-content: flex-end;
  align-items: center;
}

#navbarListItem {
  padding-left: 10px;
  padding-right: 10px;
}

<!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.0">
  <!-- Bootstrap css-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href=/static/main.css>
  <link rel="stylesheet" href=/static/style.css>
  <link rel="shortcut icon" type="image/png" href="/static/media/favicon.png" />
  <title>Dimsum Siblings</title>
  <!--font-awesome including icon for shopping cart-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-secondary" id="navbar">
    <a class="navbar-brand navbar-left" href="/" id="navbarLogoLink">
      <img src="static/media/logoWithText.png" alt="" id="navbarLogo">
    </a>

    <button class="navbar-toggler m-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="">
            <h3 id="linkText">ABOUT US</h3>
          </a>
        </li>

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="/dimsumshop">
            <h3 id="linkText">ORDER DIMSUM BOX</h3>
          </a>
        </li>

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="">
            <h3 id="linkText">INSTRUCTIONS</h3>
          </a>
        </li>

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="">
            <h3 id="linkText">CONTACT</h3>
          </a>
        </li>

      </ul>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

</body>

</html>

Twitter Bootstrap Nav Collapsing not working properly

Try this at the top:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

Also, add this at the bottom of your page before the closing tag

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

How to make Navbar collapse upon selection?

Just add:

$(".navbar-toggle").click();

To each route you want (in the router.js file). Or the better option is to define it as a function which you call at each route.

Router.route('/somewhere', function(){
    $(".navbar-toggle").click();
    this.render("navbar", {to:"navbar"});
    this.render("something", {to:"main"});
});

Edit:

Using $('.navbar-toggle').click(); once off instead of applying it to each route, you can do that following in the router.js file:

Router.configure({
  onAfterAction: function() {
    if($('#navbar-collapse').hasClass('in')) {
      $('.navbar-toggle').click();
    }
  }
});