Click to collapse the Bootstrap navbar

Question

Click to collapse the Bootstrap navbar

Is there a way to collapse the Bootstrap nav bar when a user clicks on a nav-bar button instead of it staying open?

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a data-toggle="tab" href="#sectionA">Page1</a></li>
        <li><a data-toggle="tab" href="#sectionB">Page2</a></li>
        <li><a data-toggle="tab" href="#sectionC">Page3</a></li>
       </ul>
    </div>
  </div>
</nav>

Screenshot:

This is how the nav-bar looks after clicking on a button (it stays open):

This is how I would like it to be after clicking on a button (back to its original state):

html css twitter-bootstrap-3

Answer 1

Answer №1

Here are two ways to solve this issue:

Option 1: Utilize the data-toggle attribute

To make your menu collapse when a menu item is selected, simply add

data-toggle="collapse" data-target=".in"

to the anchor elements.

See below for an example code snippet:

    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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">Brand</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
<!-- Add data-toggle="collapse" data-target=".in" to <a> elements-->
<!-- This way they will collapse the responsive menu when clicked -->
            <li class="active"><a data-toggle="collapse" data-target=".in" href="#sectionA">Page1</a></li>
            <li><a data-toggle="collapse" data-target=".in" href="#sectionB">Page2</a></li>
            <li><a data-toggle="collapse" data-target=".in" href="#sectionC">Page3</a></li>
           </ul>
        </div>
      </div>
    </nav>

Check out an example here: http://jsfiddle.net/Frondor/sey4wsah/

Option 2: Use jQuery as a more effective method

If the first option doesn't work for you, consider adding some jQuery lines after including the jQuery and Bootstrap.js libraries:

<script src="/js/jquery.min.js"> <!--Assuming these are the correct paths -->
<script src="/js/bootstrap.min.js">

Add the following jQuery code below:

<script>
$(document).ready(function () {
    $("nav").find("li").on("click", "a", function () {
        $('.navbar-collapse.in').collapse('hide');
    });
});
</script>

This script will automatically collapse your responsive menu whenever a link is clicked. Give it a shot!

Answer 2

Here are two ways to solve this issue:

Option 1: Utilize the data-toggle attribute

To make your menu collapse when a menu item is selected, simply add

data-toggle="collapse" data-target=".in"

to the anchor elements.

See below for an example code snippet:

    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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">Brand</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
<!-- Add data-toggle="collapse" data-target=".in" to <a> elements-->
<!-- This way they will collapse the responsive menu when clicked -->
            <li class="active"><a data-toggle="collapse" data-target=".in" href="#sectionA">Page1</a></li>
            <li><a data-toggle="collapse" data-target=".in" href="#sectionB">Page2</a></li>
            <li><a data-toggle="collapse" data-target=".in" href="#sectionC">Page3</a></li>
           </ul>
        </div>
      </div>
    </nav>

Check out an example here: http://jsfiddle.net/Frondor/sey4wsah/

Option 2: Use jQuery as a more effective method

If the first option doesn't work for you, consider adding some jQuery lines after including the jQuery and Bootstrap.js libraries:

<script src="/js/jquery.min.js"> <!--Assuming these are the correct paths -->
<script src="/js/bootstrap.min.js">

Add the following jQuery code below:

<script>
$(document).ready(function () {
    $("nav").find("li").on("click", "a", function () {
        $('.navbar-collapse.in').collapse('hide');
    });
});
</script>

This script will automatically collapse your responsive menu whenever a link is clicked. Give it a shot!

Answer 3

Answer №2

Place the file named bootstrap.min.js in the js directory, and include the following line

<script src="js/bootstrap.min.js"></script>

just before the closing </body> tag. Also, store the file called bootstrap.min.css in the css folder, and insert this code

<link rel="stylesheet" href="css/bootstrap.min.css">

right before the closing </head> tag.

Answer 4

Place the file named bootstrap.min.js in the js directory, and include the following line

<script src="js/bootstrap.min.js"></script>

just before the closing </body> tag. Also, store the file called bootstrap.min.css in the css folder, and insert this code

<link rel="stylesheet" href="css/bootstrap.min.css">

right before the closing </head> tag.

Click to collapse the Bootstrap navbar

Answer №1

Option 1: Utilize the data-toggle attribute

Check out an example here: http://jsfiddle.net/Frondor/sey4wsah/

Option 2: Use jQuery as a more effective method

Answer №2

Similar questions

What is the best way to remove horizontal scrolling and reduce element size on mobile devices?

Adjust the font size based on the dimensions of the container

Ways to perfectly position a bootstrap well in the center

Bootstrap 4 opts for a different approach by not incorporating a hamburger menu and avoiding the collapse of the

Text cannot be highlighted within DIV element

Guide on finding and replicating a particular string in HTML connected websites

Is there a way to determine the quantity of items within a sortable div?

How can I delete the header and footer on a personalized homepage design?

The precedence of theme CSS is paramount

Changing Content Dynamically in Adobe Muse

PHP code isn't showing any posts

JavaScript - Toggling checkboxes to either be checked or unchecked with a "check all" option

Adding Information to a Material Design Card

Show unique language text in the <noscript> element based on the user's browser language

Contrasts between space and the greater than selector

The function setCustomValidity() will continue to display even after the form has been successfully filled out

CSS - The Failure of Implementing Multiple Segmented Controls

Tips for avoiding Bootstrap collapse overflow within a container that has overflow-y-scroll

Utilize a function within styled-components

Incorporate a vibrant red circle within a tab of the navigation bar