CODEWITHSUNDEEP
htmlcssbootstrap-4twitter-bootstrap-4
JunKim
JunKim

Reputation: 787

Bootstrap 4 navbar sticky top doesn't work when nested in div

I'm a beginner starting from a Web application and using Bootstrap 4 to design my web. Here is a quick question.

Navbar doesn't tend to stick on top when the code is like

<nav class="navbar navbar-expand-sm navbar-dark sticky-top">
  <div class="container" style="padding:0;">
    <a class="navbar-brand text-info">The Bros</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="nav nav-justified">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

but it works when I only change the order of first and second like below: (the rest is the same as before)

<div class="container" style="padding:0;">
<nav class="navbar navbar-expand-sm navbar-dark sticky-top">

Since I would like to make the background of navbar colored, I want to use the second method but the navbar doesn't stick to the top.

Is there any way to solve it?

Upvotes: 2

Views: 2993

Answers (1)

WebDevBooster
WebDevBooster

Reputation: 14954

I would like to make the background of navbar colored

You can do that in both cases, regardless.

Here's how you can do that in the first case (click the "run code snippet" button below and expand to full page): 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
    <div class="container p-0">
        <a class="navbar-brand text-info">The Bros</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="nav nav-justified">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<main class="container mt-4">
    <div class="row">
        <div class="col">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
            </p>
            <p style="margin-top: 999px;">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
            </p>
        </div>
    </div>
</main>

And the second case: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container p-0 sticky-top">
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <a class="navbar-brand text-info">The Bros</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
               <span class="navbar-toggler-icon"></span>
           </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="nav nav-justified">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </nav>
</div>
    
<main class="container mt-4">
    <div class="row">
        <div class="col">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
            </p>
            <p style="margin-top: 999px;">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
            </p>
        </div>
    </div>
</main>

So, in the second case, you just add the sticky-top class to the .container instead of the navbar.

Also notice the use of spacing classes p-0 (padding:0) and mt-4 (margin-top 4 units).

Upvotes: 2

Related Questions