Bootstrap 4 Multiple Fixed Navbars with Animated Shrink

Bootstrap 4 multiple fixed Navbars with animated shrink

I think you should wrap both navbars in a single DIV, and make that the data-toggle="affix" element. This way you only make the outer DIV fixed, and the second navbar will naturally follow the height of the 2nd since both are static position.

https://codeply.com/go/DpHESPqZsx

<div class="fixed-top" data-toggle="affix">
    <div class="navbar navbar-dark bg-dark navbar-expand-sm py-5" id="first">
        ... 
    </div>
    <div class="navbar navbar-light bg-light navbar-expand-sm" id="second">
        ...
    </div>
</div>

Adjust the CSS to apply the padding animation to the top navbar instead of the affix element:

.fixed-top #first { 
  -webkit-transition:padding 0.2s ease;
  -moz-transition:padding 0.2s ease; 
  -o-transition:padding 0.2s ease;        
  transition:padding 0.2s ease;  
}

.affix #first {
  padding-top: 0.2em !important;
  padding-bottom: 0.2em !important;
  -webkit-transition:padding 0.2s linear;
  -moz-transition:padding 0.2s linear;  
  -o-transition:padding 0.2s linear;         
  transition:padding 0.2s linear;  
}

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

Two navbars below the other one with bootstrap

I've tried your code and it's works

I also tried adding it into 1024px container

.container{
    max-width: 1024px;
}

this is the result

Your css code must be conflicted with the bootstrap. maybe you could try wrapping each navbar with .row. I believe that this solution is surely make all navbar separated.

<div class="row-fluid">
  <div class="span12">
    ... navbar 1 ...
  </div>
</div>

<div class="row-fluid">
  <div class="span12">
    ... navbar 2 ...
  </div>
</div>

Bootstrap 4 Navbar has zero height on smaller viewport

It does this because the .navbar-toggler-right is positioned absolutely to the right, which takes it out of the flow of the relative container. The .navbar has padding, which is why the black bar is still shown partly. If you change the .container to a container fluid and position the .navbar-toggler-right relatively and float it right, the menu will be placed in the same position, but the bar won't be hidden.

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

Fix navbar elements size when navbar shrinks

Your issue is

.navbar-default .navbar-nav>li>a {
  line-height: 95px;
}

You need that to be 70px when small to account for the padding (or remove the padding when small).

Simple answer:

.navbar-default.scrolled-nav .navbar-nav>li>a {
  line-height: 70px;
}

top nav bar blocking top content of the page

Add to your CSS:

body { 
    padding-top: 65px; 
}

From the Bootstrap docs:

The fixed navbar will overlay your other content, unless you add padding to the top of the body.

---

Related Topics