bootstrap: Navbar .sticky-top doesn't work

According to the navbar component guide, in order to make a navbar sticky, you have to add the .sticky-top class.

I’m using Chrome 55.0.2883.87 and Bootstrap 4 beta 6 and the position rules added by bootstrap are invalid according to Chrome, therefor, nothing happens:

Chrome image

To replicate the issue, create a navbar as so:

<nav class="navbar sticky-top navbar-light bg-faded">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 23 (2 by maintainers)

Most upvoted comments

My setup: Bootstrap@4.0.0-beta.2 macOS Sierra - Version 10.12.6 Google Chrome - Version 62.0.3202.62 (Official Build) (64-bit) Safari - Version 11.0 (12604.1.38.1.7) Safari Technology Preview - Release 42 (Safari 11.1, WebKit 12605.1.10)

http://caniuse.com/#feat=css-sticky Can I Use said it’s supported in Safari with webkit

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

I think this should definitely be added to Bootstrap, with other vendor prefixes if they apply.

https://css-tricks.com/position-sticky-2/

WebKit dropped in 2013, Firefox in 2014, and now Blink in (probably) 2016. MDN explains it well:

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

In the codepen example shown on that page, sticky works on all browsers listed above.

I did some tests and found that .sticky-top will not work if it is inside any container. It must be the outside-most element inside <body>

These examples work:

<body>
    <header class="sticky-top">
        <nav class="navbar navbar-light bg-light p-0"> 
            ... 
        </nav>
    </header>
...
</body>

and

<body>
    <nav class="navbar sticky-top navbar-light bg-light p-0">
        ...
    </nav>
...
</body>

I don’t think these are Bootstrap-related, but I hope this helps everyone who has commented and who finds this page.

+101

tehlivi on Oct 26, 2017

Don`t Use “position:sticky” replace it with “position:fixed” it will safe your life.

+14

emran-shaikh on Feb 9, 2018

A quick hint to anyone who still can’t get position: sticky working. Sometimes it’s caused by the parent element having certain overflow or height settings. This explains it further: http://blog.cloud66.com/position-sticky-problem/.

Off-canvas nav frequently adds an overflow attribute, so that’s one place to look if you can’t readily find the source of the issue.

zarqman on Nov 10, 2017

It works perfect thank you @hugmanrique @zarqman

Few stuff i corrected

make sure <nav>…</nav>tag is direct child ofbody
make sure the direct parent ; (body) has no overflow property on it

The rest is normal if you are using bootsrap 4 : -add sticky-top

you can use javascript tooo will work !!

jedbonheur on Dec 14, 2017

I encountered this and actually had an issue with

body, html {
    height: 100%;
}

taking that out and only putting it in the actual needed location fixed it. Reason being is that the sticky navbar is above the body, hence not visible.

hope this helps!

mymindishazel on Mar 24, 2018

The sticky-top class doesn’t work either.

chris13524 on Feb 14, 2017

Wouldn’t it be better to use position: fixed; and top: 0; for backwards compatibility?

hugmanrique on Feb 6, 2017

This problem also exists in version 5 To solve this problem, keep ‘sticky-top’ and put it out of the header.

EhsanKarimmi on Aug 20, 2021

I had same problem by using the navbar inside header section. Solution that fixed the problem was to set header{display:unset;}

kalevskis on Jan 2, 2020