Bootstrap 4 Collapsing Two Navbars into One Toggle Button

Bootstrap 4 collapsing two navbars into one toggle button

Use a single class to data-target the Navbars, instead of different id's. For example, give both the navbar-collapse elements the navbars class, and then the target is data-target=".navbars".

Demo: https://www.codeply.com/go/PvHpcBNuAp

Also, I'm not sure why you're using sticky-top on the 1st navbar. You should remove that otherwise the 2nd navbar will slide under the first on mobile when scrolling. If you want both navbars fixed at the top, see this answer.

   <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <button class="navbar-toggler" data-toggle="collapse" data-target=".navbars">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse navbars" id="collapse_target1">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
                <a class="navbar-brand">
                    <img src="https://image.freepik.com/free-vector/businessman-shouting-through-megaphone_23-2147511376.jpg" style="height: 2em">
                    <span>Home</span>
                </a>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 4</a>
                </li>
            </ul>
        </div>
    </nav>
    <nav class="navbar navbar-expand-sm navbar-light bg-light">
        <div class="collapse navbar-collapse navbars" id="collapse_target2">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 5</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 6</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 7</a>
                </li>
            </ul>
        </div>
    </nav>

Also see: Bootstrap 4 navbar with 2 rows

Multiple navbars, both collapse buttons work, only one shows up

You're missing the navbar-default class in your second navbar, also you should use a navbar-header container for the toggle button.

See this demo fiddle with the updated markup

Bootstrap v4 multiple navbar-toggleable targeted by single navbar-toggler

Bootstrap 4 is still in Alpha and this is one of the bugs around.

https://github.com/twbs/bootstrap/issues/19813

You can still use Javascript though.

Here's a quick alternative with JavaScript:

https://jsfiddle.net/e9xs33pa/2/

HTML:

<button class="navbar-toggler hidden-lg-up" type="button" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation" id="MyID">☰</button>

<div class="collapse navbar-toggleable-md exCollapsingNavbar">Test</div>
<div class="collapse navbar-toggleable-md exCollapsingNavbar">Test 2</div>

JS:

jQuery('#MyID').on('click', function(){
    jQuery('.exCollapsingNavbar').collapse('toggle');
});

Basically, you give the button an ID of MyID. Have jQuery collapse toggle the exCollapsingNavbar class when the button is clicked.

Bootstrap two navbars collapsing

You use the same id value for both navbar, change the id for the second navbar and the corresponding data-target value:

 <nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" 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" href="#">MAIN menu</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">MAIN menu link1</a></li>

    </ul>
  </div><!-- /.navbar-collapse -->
</nav>
<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
      <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="#">Sub menu</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Sub menu link1</a></li>

    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

Working example

Bootstrap 4 navbar with two rows, bottom row collapsible

The example below is a pure Bootstrap 4 solution to this problem.

Breakdown:

  • We are using two .navbars, one below the other. Both having the same .navbar-expand-{breakpoint} classes, .navbar-expand-lg in this case.
  • Title is positioned to center with the .ml-auto .mr-auto classes. That leaves the toggler button intact at the right edge.
  • In order to eliminate the border when the bottom navbar is collapsed (caused by the paddings of the bottom navbar), .py-0 is introduced on the navbar itself, and .my-2 is added to the .navbar-collapse to re-gain the spacing.
  • Finally, applying .sticky-top to both navbars. So, when only the top navbar is visible, it will stay fixed to top, however when the bottom navbar is visible too, that will be fixed to the top instead of the top navbar.

#content {    height: 200vh;}
<nav id="topnavrow" class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">    <a class="navbar-brand ml-auto mr-auto" href="#">_________TITLE_________</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navcollapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">        <span class="navbar-toggler-icon"></span>    </button></nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light py-0 sticky-top">    <div id="navcollapse" class="collapse navbar-collapse my-2">        <div class="navbar-nav">            <a class="nav-item nav-link active" href="#">Item 1</a>            <a class="nav-item nav-link" href="#">Item 2</a>            <a class="nav-item nav-link" href="#">Item 3</a>            <a class="nav-item nav-link" href="#">Item 4</a>        </div>    </div></nav>
<section id="content">    [page content]</section>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Use one toggle button to close one of two opened navbars

Solved with this - anywhere I click outside of that navbar it will collapse. I used the same principle with some modification and I added this inside of a function linked ,,close button" so either user click anywhere on the page or directly on the close button and it will close both.

 <script type="text/javascript">
 $(document).click(function(e) {
     if (!$(e.target).is('a')) {
         $('.cities').collapse('hide');
        $('.menu').collapse('hide');
        $('#navbars').attr('data-target','.menu');        
    }
 });
 </script>

Partially collapsed Bootstrap navbar with hidden items not at edges

There is no Bootstrap native solution. But there is a workaround using two identical navbars.

navbar 1:

  • has d-none d-md-block (for example) for nav items that should be hidden on small screens
  • on large screens it shows all nav items
  • it does not have a toggle button (or alternatively, it does, but the "external content" is the second navbar)

navbar 2:

  • has the same navbar items, and a toggle button
  • is always in a collapsed state
  • on small screens it shows the toggle button; when clicked it shows a dropdown with all nav items

e.g. large screen:

Item1  Item2  Item3  Item4  Item5

e.g. small screen:

Item1  Item3  Item5  =menu=
                     Item1
                     Item2
                     Item3
                     Item4
                     Item5

or e.g. small screen:

=menu=  Item1  Item3  Item5
Item1
Item2
Item3
Item4
Item5

Code from bootstrap documentation doesn't work

First of all please have a look to this official bootstrap 5 documentation it has everything you want in order to start coding using bootstrap 5 and i also didn't understand why you are using bootstrap 4 since there is a newer version of bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

How to hide collapsible Bootstrap navbar on click

Update 2021 - Bootstrap 5 (beta)

Use javascript to add a click event listener on the menu items to close the Collapse navbar..

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) => {
    l.addEventListener('click', () => { bsCollapse.toggle() })
})

BS5 demo javascript method

Or, Use the data-bs-toggle and data-bs-target data attributes in the markup on each link to toggle the Collapse navbar...

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Disabled</a>
                </li>
            </ul>
            <form class="d-flex my-2 my-lg-0">
                <input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

BS5 demo data-attributes method

Update 2019 - Bootstrap 4

The navbar has changed, but the "close after click" method is still the same:

BS4 demo jQuery method

BS4 demo data-toggle method

Bootstrap 3 (original answer)

You can add the collapse component to the links like this..

<ul class="navbar-nav mr-auto">
     <li class="nav-item active" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#about-us">About</a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#pricing">Pricing</a>
     </li>
 </ul>

BS3 demo using 'data-toggle' method

Or, (perhaps a better way) use jQuery like this..

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

BS3 demo using jQuery method


Related Topics

How to Have Perfectly Centered Navigation Bar with Equally Wide Links

Math Equations on The Web

Only Load Div Iframe Onclick

Improving CSS3 Transition Performance

How to Center The Twitter Bootstrap Tabs on The Page

How to Bottom-Align Grid Elements in Bootstrap Fluid Layout

Styling The Last Td in a Table with CSS

HTML5 Input for Money/Currency

What Does "<HTML Xmlns="Http://Www.W3.Org/1999/Xhtml">" Do

CSS Vertically Align Floating Divs

Flipping/Inverting/Mirroring Text Using CSS Only

Stop Floating Divs from Wrapping

Apply Different CSS Stylesheet Depending on Browser Window Size - I Can't Find Anything Definitive

How to Change Font in Ipython Notebook

Overlaying a Div on Top of HTML 5 Video

Why Don't Svg Images Scale Using The CSS "Width" Property

How to Restrict My Input Type="File" to Accept Only Png Image Files Not Working in Firefox

CSS: How to Create a Gap Between Rows in a Table


Leave a reply



Submit