Bootstrap 4.0 - Two Navbars That Collapse into One Toggle

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 breakpoints on one bootstrap 4 navbar

There would need to be some custom CSS to control #navbar1...

@media (min-width: 576px) {
    #navbar1 {
        display: flex !important;
        flex-basis: auto;
    }

    /* prevent flicker during toggle */
    #navbar1.collapsing {
        transition: none;
        height: auto;
    }

    #navbar1 .navbar-nav {
        flex-direction: row;
    }
}

And some changes to the navbar markup:

<nav class="navbar bg-dark navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler order-sm-1" type="button" data-toggle="collapse" data-target=".navbars">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse order-sm-0 navbars" id="navbar1">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 1</a> </li>
                <li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 2</a> </li>
                <li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 3</a> </li>
            </ul>
        </div>
        <div class="collapse navbar-collapse navbars order-last" id="navbar2">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="#">Option 4</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Option 5</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Option 6</a> </li>
            </ul>
        </div>
    </div>
</nav>

Demo: https://codeply.com/p/pAhSgWkXcA

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.

how to collapse bootstrap 4 navbar

You need to include CDN version of jQuery before it, it's written in the bootstrap documentation.
https://getbootstrap.com/docs/4.4/getting-started/download/

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

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 Multiple fixed-top navbars

Yes, it's possible but you have to position the 2nd one accordingly. The height of the Navbar is ~56px.

.fixed-top-2 {
    margin-top: 56px;
}

body {
    padding-top: 105px;
}

<nav class="navbar navbar-toggleable-sm bg-faded navbar-light fixed-top fixed-top-2">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand">One</a>
    <div class="navbar-collapse collapse" id="navbar1">
        <ul class="navbar-nav">
            ..
        </ul>
    </div>
</nav>

<nav class="navbar navbar-toggleable-sm bg-inverse navbar-inverse fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand">Two</a>
    <div class="navbar-collapse collapse" id="navbar2">
        <ul class="navbar-nav">
            ..
        </ul>
    </div>
</nav>

Demo: Bootstrap 4 Multiple fixed-top Navbars

In some scenarios, it may be better to use a single fixed-top DIV to contain both.

Also see:
Bootstrap 4 Navbar sticky after header

Bootstrap 4 collapsing two navbars into one toggle button

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>

---

Related Topics