Why is my .sticky-top class not working in Bootstrap 4?

Question

I am new to Bootstrap, trying to make responsive menu. For some reason sticky-top won't work. My browser does support it, and comparing my code to other working versions I just can't see why it's not working. I am using bootstrap 4.1.3.

Here is my code; I am not aware of any possible collisions with sticky-top.

h1,h2,h3,h4,p,ul,ol,li,body {
    margin: 0;
    padding: 0;
}
a {
    transition: all 0.3s ease-out;
}
a:hover { 
    transition: all 0.3s ease-out;
}
.container {
    margin: auto;
}
.clearfix:after, .clearfix:before {
    content: "";
    display: block;
    clear: both;
}
*, *:after, *:before {
    box-sizing: border-box;
}
@media screen and (max-width: 479px) {
.container {width: 92%}
}
@media screen and (min-width: 480px) {
.container {width: 95%}
}
@media screen and (min-width: 740px) {
.container {width: 95%}
}
@media screen and (min-width: 960px) {
.container {width: 95%}
}
@media screen and (min-width: 1200px) {
.container {width: 1200px}
}

.dropdown-menu {
    background: #0F574F;
}

.navbar {
    padding: 3px 0;
    background: #db8259;
    border-bottom: 6px solid #886453;
}
.mainmenu ul li {
    width: 140px;
}

.mainmenu ul li a {
    background: #0F574F;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 20px;
    display: block;
    color: #fff;
}

.mainmenu ul > li:hover > a {
   background: #588883;
}
.mainmenu ul li ul {
    background: #db8259;
}

.mainmenu {
    text-align: center;
}
.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show>.btn-outline-dark.dropdown-toggle {
    background-color: #0b3e38;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: #fff;
    background-color: #588883;

}
@media screen and (max-width: 991px) {
    .mainmenu ul li a {padding: 8px 0; display: block; margin:0 auto 3px;}
    .navbar-nav {padding-right: 145px;} 
    .dropdown-item, .mainmenu ul li a {width: 300px;}
    .dropdown-item {text-align: center;}
    .dropdown-menu {margin-left: -3px; width: 320px;}
}

<head>
    <title>CB Horní Počernice</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/all.css">

<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700&amp;subset=latin-ext" rel="stylesheet"> 
</head>
 <header>
 <nav class="navbar navbar-expand-lg mainmenu justify-content-center sticky-top">
        <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link btn btn-outline-dark mx-2" role="button" href="#">Domů</a></li>
                    <li class="nav-item"><a class="nav-link btn btn-outline-dark mx-2" role="button" href="#">Historie</a></li>
                    <li class="nav-item dropdown"><a class="nav-link btn btn-outline-dark dropdown-toggle mx-2" id="navbardrop" role="button" data-toggle="dropdown" href="#">Program</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Aktuální program</a>
                            <a class="dropdown-item" href="#">Sborový dopis</a>
                            <a class="dropdown-item" href="#">Texty</a>
                        </div>
                        </li>
                    <li class="nav-item dropdown"><a class="nav-link btn btn-outline-dark dropdown-toggle mx-2" id="navbardrop" role="button" data-toggle="dropdown" href="#">Služby</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Křty</a>
                            <a class="dropdown-item" href="#">Svatby</a>
                            <a class="dropdown-item" href="#">Pohřby</a>
                        </div>
                    </li>
                    <li class="nav-item"><a class="nav-link btn btn-outline-dark mx-2" role="button" href="#">Galerie</a></li>
                    <li class="nav-item"><a class="nav-link btn btn-outline-dark mx-2" role="button" href="#">Kontakt</a></li>
                </ul>
            </nav>
        </header>

https://getbootstrap.com/docs/4.1/utilities/position/#sticky-top *but only after you scroll past it* (that requires you have added `bootstrap.js`). — connexo, Sep 30 '18 at 18:04
The links in my are not enough? Or maybe different order? I tried few variants but none work for me. — Pavel Horyna, Sep 30 '18 at 18:26
This is basically a dupe of https://stackoverflow.com/questions/50907229/bootstrap-4-sticky-top-not-working — Carol Skelly, Apr 05 '21 at 09:36

score 35 · Accepted Answer · answered Aug 29 '19 at 13:56

35

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.

The best solution is to remove it or change its value to 'unset'

answered Aug 29 '19 at 13:56

diego sanches

944
9
8

1

How do you know such things??? Thanks for sharing - fixed it for me. – Ralf Oct 30 '19 at 09:02
Wasted 2 hours until I found the solution. Note that you can acheive the same thing with `position: sticky;` of normal css [link](https://www.w3schools.com/howto/howto_css_sticky_element.asp). I guess it will also require the same removal of overflow as listed in the answer. – yogihosting May 26 '21 at 15:55
But how do you hide the scrollbar at the bottom then? >. – Grant Jun 01 '21 at 15:15
1

I set, all parent to overflow: unset but not still working – skonsoft May 17 '22 at 19:21

score 20 · Answer 2 · edited Aug 29 '19 at 13:58

20

What browser you are using?

position: sticky is not fully supported in all browsers.

In IE11 and IE10 will render position: sticky as position: relative.

updated: set class name "sticky-top" in <header> will work because it's relative sticky to the parent element, in this case, it's the whole HTML body

<header class="sticky-top">

edited Aug 29 '19 at 13:58

TylerH

20,799
66
75
101

answered Sep 30 '18 at 18:01

Jiachen Guo

281
1
8

Chrome Version 69.0.3497.100 (Official Build), so it should work. – Pavel Horyna Sep 30 '18 at 18:02
3

@PavelHoryna ah, I know what it's going on now, it is because you set the sticky class in your nav bar, but you also have a
wrapped your nav bar, you nav bar will stick relative to the header, but the header doesn't have any other contents in there, that's why it not work. one way to solve that it's, remove your
, and put you other contents below the navbar. or if you don't want to remove the header, you can just put the css class in the header like this
– Jiachen Guo Oct 01 '18 at 03:34
check out this demo, should work fine, hope it will help you https://codepen.io/stevejiachen/pen/dgopvq – Jiachen Guo Oct 01 '18 at 03:35
Thank you very much for the help, I will try it out when I get home from work! – Pavel Horyna Oct 03 '18 at 05:03

score 7 · Answer 3 · edited Sep 11 '19 at 20:10

As you can see it's easy to implement. However, if your element isn't sticking as expected the first thing to check are the rules applied to the container.

Specifically, look for any overflow property set on the parent. You can't use: overflow: hidden, overflow: scroll or overflow: auto on the parent of a position: sticky element.

If you're not using overflow and still having problems it's worth checking if a height is set on the parent? This may constrain the sticky positioning, stopping it from occurring. Remove the height and see if that fixes the problem.

score 6 · Answer 4 · answered Oct 06 '18 at 10:44

6

I was not able to fully solve this with bootstrap. What Jiachen Guo proposed was only a partial solution, as it prohibits me to add anything into the header.

I solved this with just adding javascript from w3schools: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp This enables for more customization as well. So this is what I would recommend to people having trouble with sticky-top class in bs4.

answered Oct 06 '18 at 10:44

Pavel Horyna

360
1
5
17

I can confirm that this is the best solution, if the navbar is placed outside the header tag, the sticky-top works as expected, if it is placed inside, it does'nt. And i have no idea why, because the header tag does not have any particuliar property (overflow...etc) – Xavier C. Feb 20 '20 at 14:42

score 5 · Answer 5 · answered Jan 01 '20 at 18:18

5

In my case the nav-bar was in a section, so sticky-top wasn't working. So, taking the nav-bar out of the section or making the section sticky-top works!

answered Jan 01 '20 at 18:18

Vivek Singh

346
3
14

1

@Aseem, if it worked, you should upvote the answer. – Vivek Singh Apr 06 '20 at 17:54
1

I did. Thats why your answer went from -2 to -1. :) – Aseem Apr 08 '20 at 17:27

score 3 · Answer 6 · answered Jun 18 '20 at 04:16

3

Just substitute div tag for nav tag and it will be ok

answered Jun 18 '20 at 04:16

soroosh.m

49
2

This is the correct answer for this question, "sticky-top" is a class for 'nav" tag only when you use it for navbar. – Waleed Asender Aug 29 '20 at 08:58

score 2 · Answer 7 · answered Jul 14 '20 at 13:48

2

a generic solution : if your navbar is inside any section or div , get rid of it immediately. it will surely work.

answered Jul 14 '20 at 13:48

Rezaul Karim

67
3

score 1 · Answer 8 · answered Dec 27 '20 at 13:03

1

Try to remove the header tag, it worked for me.

answered Dec 27 '20 at 13:03

lily

11
2

1

Hello and welcome to SO! Please read the [tour](https://stackoverflow.com/tour), and [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) For example you can elaborate the effect of such a change, and advantages and disadvantages against other answers to this question. – Tomer Shetah Dec 27 '20 at 13:44
Thank you very much. Its works for me. But not able to figure out why it is not working with header. – Rudrakshya Barman May 28 '21 at 07:37

score 1 · Answer 9 · answered May 18 '23 at 21:20

1

In my case I used "andy-bll-css-reset", with html, body{ height: 100%; } ...so when i scroll past 100% height, my toolbar disappears. Summary, kindly check your html and body style.

answered May 18 '23 at 21:20

user21922078

11
1

score 0 · Answer 10 · answered Aug 04 '23 at 12:58

I faced same issue :

html, body {
    max-width: 100%;
    overflow-x: hidden; 
}

this was the code working previously i changed this and comment overflow-x:hidden and it works.

html, body {
    max-width: 100%;
    /* overflow-x: hidden; */
}

even though you used sticky , sticky-top class with bootstrap due to overflow-x:hidden sticky menu's will stop working.

Why is my .sticky-top class not working in Bootstrap 4?

10 Answers10

Linked

Related