Fix tab bar below navigation bar (navs x navbar)



  • Objective

    Create a menu bar in tabs, under a menu bar, both fixed.


    Test scenario

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

    <div class="container-fluid">

    <nav class="navbar sticky-top navbar-light bg-light">
    <a class="navbar-brand" href="#">
    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
    </a>
    </nav>

    <ul class="nav nav-tabs sticky-top">
    <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
    </li>
    </ul>

    <br>
    <p>1</p>
    <br>
    <p>2</p>
    <br>
    <p>3</p>
    <br>
    <p>4</p>
    <br>
    <p>5</p>
    <br>
    <p>6</p>
    <br>
    <p>7</p>
    <br>
    <p>8</p>
    <br>
    <p>9</p>

    </div>


    Problem

    When I use fixed-top in the top bar, the content is already below it.
    If use sticky-top, it is correct.

    Already in fixing the tab menu, if use sticky-top, it does not fix, and it rises on top of the upper bar, and if use fixed-top, it is hidden behind the upper bar.


    Doubt

    • Is there a standard BS4 solution to solve this problem?
    • If not, what would be the options?



  • It's not just putting the two elements inside the same <div> and add the class .sticky-top her?

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

    <div class="container-fluid">

    <div class="sticky-top">
    <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> Bootstrap
    </a>
    </nav>

    &lt;ul class="nav nav-tabs"&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link active" href="#"&gt;Active&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    

    </div>

    <br>
    <p>1</p>
    <br>
    <p>2</p>
    <br>
    <p>3</p>
    <br>
    <p>4</p>
    <br>
    <p>5</p>
    <br>
    <p>6</p>
    <br>
    <p>7</p>
    <br>
    <p>8</p>
    <br>
    <p>9</p>

    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2