htmlcsstwitter-bootstrap

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

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>

Solution

  • One more thing to check is if any parent element has one of these css properties set:

    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'

    enter image description here