Menu
Maybe some other classes I have are messing with the sticky-top class of bootstrap. I thought it was as simple as adding the class to the navbar. I do have 2 navbar and not allowed to use fixed-top for some internal reasons. I was hoping for the second navbar I have is sticky to the top while I am scrolling down. What am I doing wrong? here's my code
/* .text-spLeft {
margin-left: 5px;
}
.text-spRight {
margin-right: 5px;
}
.header-secondnav .fixed-top {
margin-top: 70px !important;
}
.header-firstnav .top-nav-ul, .header-secondnav .top-nav-ul {
border-bottom: 5px;
border-bottom-color: grey;
border-bottom-style: solid;
border-bottom-width: thin;
}
.header-firstnav .top-nav-ul li, .header-secondnav .top-nav-ul li {
margin-bottom: 15px;
}
.header-firstnav .dropdown-toggle-ellipsis::after, .header-secondnav .dropdown-toggle-ellipsis::after {
display: none;
}
.header-firstnav .form-control:focus, .header-secondnav .form-control:focus {
outline: 0 !important;
}
.header-firstnav .nav-link, .header-secondnav .nav-link {
color: black;
font-weight: bold;
}
.header-firstnav .fa-chevron-down, .header-secondnav .fa-chevron-down {
color: #eb1b1e;
font-weight: bold;
} */
.text-spLeft {
margin-left: 5px;
}
.text-spRight {
margin-right: 5px;
}
.header-firstnav .top-nav-ul, .header-secondnav .top-nav-ul {
border-bottom: 5px;
border-bottom-color: grey;
border-bottom-style: solid;
border-bottom-width: thin; }
.header-firstnav .top-nav-ul li, .header-secondnav .top-nav-ul li {
margin-bottom: 15px; }
.header-firstnav .dropdown-toggle-ellipsis::after, .header-secondnav .dropdown-toggle-ellipsis::after {
display: none; }
.header-firstnav .form-control:focus, .header-secondnav .form-control:focus {
outline: 0 !important; }
.header-firstnav .nav-link, .header-secondnav .nav-link {
color: black;
font-weight: bold; }
.header-firstnav .fa-chevron-down, .header-secondnav .fa-chevron-down {
color: #eb1b1e;
font-weight: bold; }
.text-spLeft {
margin-left: 5px; }
.text-spRight {
margin-right: 5px; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="./header.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
<body>
<div class="main">
<div class="header-firstnav">
<nav class="navbar sticky-top navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="./images/dnowlogo.png" alt="image goes here" class="img-responsive">
</a>
<button class="navbar-toggler" 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 d-flex justify-content-between w-100 top-nav-ul ">
<li class="nav-item ">
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<div class="input-group-text bg-white">
<i class="fa fa-search"></i>
</div>
</span>
</div>
</form>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Shop Online</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Investor</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Careers</a>
</li>
<li class="nav-item dropdown ">
<a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
United States
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</a>
<!-- <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
United States
<i class="fa fa-heart"></i>
</button> -->
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Australia</a>
<a class="dropdown-item" href="#">Canada</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">India</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="header-secondnav">
<nav class="navbar sticky-top navbar-expand-lg">
<!-- <button class="navbar-toggler" 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 justify-content-lg-between w-100 d-lg-flex"> -->
<!-- <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li> -->
<ul class="navbar-nav d-flex justify-content-between w-100">
<li class="nav-item dropdown">
<a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products and Services
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Solutions
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Industries
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources Center
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Location</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div style="height: 2000px;">
</div>
<!-- Footer -->
<footer class="page-footer font-small mdb-color lighten-3 pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4 col-lg-3 mr-auto my-md-4 my-0 mt-4 mb-1">
<!-- Content -->
<h5 class="font-weight-bold text-uppercase mb-4">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit amet numquam iure provident voluptate
esse quasi, veritatis totam voluptas nostrum.</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mb-4">About</h5>
<ul class="list-unstyled">
<li>
<p>
<a href="#!">PROJECTS</a>
</p>
</li>
<li>
<p>
<a href="#!">ABOUT US</a>
</p>
</li>
<li>
<p>
<a href="#!">BLOG</a>
</p>
</li>
<li>
<p>
<a href="#!">AWARDS</a>
</p>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-4 col-lg-3 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Contact details -->
<h5 class="font-weight-bold text-uppercase mb-4">Address</h5>
<ul class="list-unstyled">
<li>
<p>
<i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
</li>
<li>
<p>
<i class="fa fa-envelope mr-3"></i> [email protected]</p>
</li>
<li>
<p>
<i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
</li>
<li>
<p>
<i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 text-center mx-auto my-4">
<!-- Social buttons -->
<h5 class="font-weight-bold text-uppercase mb-4">Follow Us</h5>
<!-- Facebook -->
<a type="button" class="btn-floating btn-fb">
<i class="fa fa-facebook"></i>
</a>
<!-- Twitter -->
<a type="button" class="btn-floating btn-tw">
<i class="fa fa-twitter"></i>
</a>
<!-- Google +-->
<a type="button" class="btn-floating btn-gplus">
<i class="fa fa-google-plus"></i>
</a>
<!-- Dribbble -->
<a type="button" class="btn-floating btn-dribbble">
<i class="fa fa-dribbble"></i>
</a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
428
From https://github.com/twbs/bootstrap/issues/21919
.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>
It's not working because the parent "main" container doesn't have any significant height. If you move your 2000px height div into main it will work, and sticky-top should be used on the element that is an immediate child of "main".
Demo: https://codeply.com/go/5aDkGY8KjI
<div class="main">
<div class="header-firstnav">
<nav class="navbar navbar-expand-lg">
...
</nav>
</div>
<div class="header-secondnav sticky-top">
<nav class="navbar navbar-expand-lg">
...
</nav>
</div>
<div>content with height...</div>
</div>
<footer></footer>
Also note: sticky-top will not work if any of the parents have overflow: hidden
Related: How to place navbar below sticky navbar using bootstrap 4?
33
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'
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
