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

Leave a Comment