Creating 2 navbar using Bootstrap 4

Question

Is is possible to create 2 different navbar's using Bootstrap 4.3.x like the image below?

With the first navbar (with Sample Brand) fixed to top, and the second navbar scrollable?

Not sure if there is a utility from Bootstrap I can use to handle this.

Im tried adding a 'margin-top: 56px' on the second navbar which will give a space allowance, but this only works with large screens, as the first navbar's height will change when the burger menu icon shows.

My current code is:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" >
    <div class="container">
        <a class="navbar-brand" href="#">
            Sample Brand
        </a>

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

        <div class="collapse navbar-collapse flex-column" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Login
                        <span class="sr-only">(current)</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Register</a>
                </li>
            </ul>
        </div>
    </div>
</nav>


<nav class="navbar navbar-expand-lg navbar-dark p1-primary static-top" style="margin-top: 56px">
    <div class="container">
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>

                <li class="nav-item font-weight-lighter">
                    <a class="nav-link" href="#">FAQs</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Developer</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

This runs ok with large screens, but when I test it on small and medium screens, this happens:

Not really sure what margin-top value should I use as Bootstrap's navbar has no fixed height.

As much as possible, I do not want to do it with javascript as I think there a possible way in css (which I just dont know. Ikr haha!) and using javascript is an overkill. Hehe

Do you want the 2nd navbar to collapse into the toggler too? Or do you expect it to always be visible? — Carol Skelly, Nov 25 '19 at 18:25

hawkstrider · Accepted Answer · 2019-11-26T13:38:21.370

You have your secondary navbar set to navbar-expand-lg so it changes to the collapsed navbar at the md breakpoint. If you want it to stay expanded, change the expand breakpoint. e.g. navbar-expand-md or navbar-expand-sm or for all viewport sizes navbar-expand

Below is an example with the secondary nav expanded in all viewports

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top" >
    <div class="container">
        <a class="navbar-brand" href="#">
            Sample Brand
        </a>

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

        <div class="collapse navbar-collapse flex-column" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Login
                        <span class="sr-only">(current)</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Register</a>
                </li>
            </ul>
        </div>
    </div>
</nav>


<nav class="navbar navbar-expand navbar-dark bg-primary static-top" style="margin-top: 56px">
    <div class="container">
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>

                <li class="nav-item font-weight-lighter">
                    <a class="nav-link" href="#">FAQs</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Developer</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

score 0 · Answer 2 · answered Nov 25 '19 at 18:31

This is very similar to Bootstrap 4 Multiple fixed-top navbars except the 2nd Navbar is static. The margin-top on the 2nd Navbar is fine.

However, "this runs ok with large screens, but when I test it on small and medium screens, this happens..."* is the problem, because the 2nd Navbar loses its height because it has no navbar-brand. The 2nd Navbar shouldn't be collapse at all and should be expanded...

<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top" >
    <div class="container">
        <a class="navbar-brand" href="#">
            Sample Brand
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                ...
            </ul>
        </div>
    </div>
</nav>
<nav class="navbar navbar-expand bg-primary navbar-dark p1-primary static-top" style="margin-top: 56px">
    <div class="container">
        <ul class="navbar-nav ">
            ...
        </ul>
    </div>
</nav>

See: https://codeply.com/p/Nqhb6cszbt/option2

Creating 2 navbar using Bootstrap 4

2 Answers2