Bootstrap 4 Sticky top not working

Question

I'm designing a sticky top navbar for my website, I've followed the documentation provided by Bootstrap on their website and looked at previously asked questions on here but I can't get my head round on why its not working. Any help would be great

        <!DOCTYPE html>

        <html>


<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="about.html">ABOUT</a>
            </li>


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


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


        </ul>
    </div>
</nav>






    </body>
    </html>

CSS

.navbar {
    background-color: #2A2F35 !important;
    padding: 0 !important;
}

/*Navbar Links*/

.navbar-nav a {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: 100;
    letter-spacing: 1px;
    color: #ffffff !important;
    padding: 25px;
    margin: 0px 25px 0px 25px;
}

.navbar-nav a:hover {
    color: #ff6600 !important;
}

Check [this table](https://caniuse.com/#feat=css-sticky) - does your browser support `position: sticky;`? — fen1x, Jun 18 '18 at 10:26
Well, your code seems to be working fine with 4.1.0 [(codepen)](https://codepen.io/fen1x/pen/NzwJrq?editors=1100). What BS version are you using? — fen1x, Jun 18 '18 at 10:33

score 0 · Answer 1 · answered Jun 18 '18 at 10:20

0

<nav class="navbar **fixed-top** navbar-light bg-light">

'fixed-top' doesn't seem to be in the nav class.

answered Jun 18 '18 at 10:20

Jitrenka

185
1
10

Sorry some of my code was cut off when posting.See edit – Will_Ghost16 Jun 18 '18 at 10:23

score 0 · Answer 2 · answered Jun 18 '18 at 10:35

0

<nav class="navbar navbar-expand-sm bg-dark navbar-dark navbar-fixed-top"></nav>

Use navbar-fixed-top instead of sticky-top

answered Jun 18 '18 at 10:35

Candy

654
2
10
24

or else add `sticky-top{position:fixed;width:100%}` to your css – Candy Jun 18 '18 at 10:52

score 0 · Answer 3 · answered Jun 18 '18 at 10:40

The following Code Works perfectly once you import bootstrap 4

.navbar {
    background-color: #2A2F35 !important;
    padding: 0 !important;
}

/*Navbar Links*/

.navbar-nav a {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: 100;
    letter-spacing: 1px;
    color: #ffffff !important;
    padding: 25px;
    margin: 0px 25px 0px 25px;
}

.navbar-nav a:hover {
    color: #ff6600 !important;
}
.height{
border:1px solid red;
min-height:500px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!--Nav bar Starts-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="about.html">ABOUT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CLOTHING</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CLOTHING</a>
      </li>
    </ul>
  </div>
</nav>
<div class="height">

</div>

Still having the same problem – Will_Ghost16 Jun 18 '18 at 10:55 — Will_Ghost16, Jun 18 '18 at 10:55

score -1 · Answer 4 · edited Jun 18 '18 at 11:55

-1

Add below lines in your css. As stikcy-top class definition is missing

width: 100%;
position: fixed;
top: 0;

target this classes: class="navbar navbar-inverse navbar sticky-top"

edited Jun 18 '18 at 11:55

Crypt32

12,850
2
41
70

answered Jun 18 '18 at 10:30

pooja

1
4

Welcome to Stack Overflow! It would be great, if you could a little bit of an explanation to your answer about why the code you're suggesting should fix the problem described in the question. – anothernode Jun 18 '18 at 10:37

score -1 · Answer 5 · answered Aug 29 '19 at 14:07

This is an old one, but just in case someone runs into the same problem, when the suggested Bootstrap 4 sticky nav does not work, one more thing to check is if any parent element has one of these css properties set:

overflow overflow-y overflow-x

If this property is set to one of these vales it will NOT work: auto, hidden, overlay, scroll.

Just remove it or change its value to 'unset'. Look for the parent elements using DevTools

Bootstrap 4 Sticky top not working

5 Answers5

Linked