How to sticky top a navbar in bootstrap4?

Question

I want to have this navbar to be sticky top but it just doesn't work. However I add sticky top to the nav element but nothing happed. I even tried sticky top in container-fluid and row but just it doesn't work

 <div class="container-fluid">
        <div class="row">
            <nav class="col-12 mt-3 navbar navbar-expand-sm navbar-light bg-light sticky-top">
                <button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
              
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a id="a-links" class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a id="a-links" class="nav-link" href="#">Man</a>
                    </li>
                    <li class="nav-item">
                        <a id="a-links" class="nav-link" href="#">Woman</a>
                    </li>
                    <li class="nav-item">
                        <a id="a-links" class="nav-link" href="#">Kids</a>
                    </li>
                    <li class="nav-item">
                        <a id="a-links" class="nav-link" href="#">Baby</a>
                    </li>
                    <!-- Dropdown menu -->
                    <li class="nav-item dropdown d-md-none d-block">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            More
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Sign in</a>
                            <a class="dropdown-item" href="#">Youe Bag</a>
                            <a class="dropdown-item" href="#">ios App</a>
                            <a class="dropdown-item" href="#">Andriod App</a>
                        </div>
                      </li>
                  </ul>
                  <form class="form-inline my-2 my-lg-0">
                    <input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
                  </form>
                </div>
              </nav>
        </div>
    </div>

Please take a look at the answers from a similar question [here](https://stackoverflow.com/questions/52580504/why-is-my-sticky-top-class-not-working-in-bootstrap-4) — Ondiek Elijah, May 28 '21 at 08:15
Does this answer your question? [Why is my .sticky-top class not working in Bootstrap 4?](https://stackoverflow.com/questions/52580504/why-is-my-sticky-top-class-not-working-in-bootstrap-4) — Sfili_81, May 28 '21 at 08:16

Rich DeBourke · Answer 1 · 2021-05-28T08:56:23.487

Your code is generally okay. I did delete your container and row, and the column class on the navbar, but it generally works (see my snippet). It would seem your problem is in the code you didn’t share (e.g. are you using the right CSS file?). I did add some content above and below your code to show the sticky operation.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
       <h1>Stuff above</h1>
    </div>
  </div>
</div>
<nav class="navbar navbar-expand-sm navbar-light bg-light sticky-top">
  <button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
              
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
         <a id="a-links1" class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
         <a id="a-links2" class="nav-link" href="#">Man</a>
      </li>
      <li class="nav-item">
         <a id="a-links3" class="nav-link" href="#">Woman</a>
      </li>
      <li class="nav-item">
         <a id="a-links4" class="nav-link" href="#">Kids</a>
      </li>
      <li class="nav-item">
         <a id="a-links5" class="nav-link" href="#">Baby</a>
      </li>
      <!-- Dropdown menu -->
      <li class="nav-item dropdown d-md-none d-block">
         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            More
         </a>
         <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
             <a class="dropdown-item" href="#">Sign in</a>
             <a class="dropdown-item" href="#">Youe Bag</a>
             <a class="dropdown-item" href="#">ios App</a>
             <a class="dropdown-item" href="#">Andriod App</a>
          </div>
       </li>
     </ul>
     <form class="form-inline my-2 my-lg-0">
        <input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
</nav>
              
              <div class="container-fluid">
        <div class="row">
            <div class="col-12 vh-100">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>

One minor note: you’re using the same a-links ID for your links. IDs must be unique.

score 0 · Accepted Answer · answered May 28 '21 at 10:44

Use sticky-top on the row, and place the navbar inside a col...

<div class="container-fluid">
    <div class="row sticky-top">
        <div class="col">
            <nav class="mt-3 navbar navbar-expand-sm navbar-light bg-light">
                Nav content...
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col">
            Page content...
        </div>
    </div>
</div>

Demo

How to sticky top a navbar in bootstrap4?

2 Answers2