Bootstrap 4 classe supérieure collante sur la barre de navigation ne fonctionne pas
Peut-être que certaines autres classes que je joue avec la classe collante de bootstrap. Je pensais que c'était aussi simple que d'ajouter la classe à la barre de navigation. J'ai 2 navbar et je ne suis pas autorisé à utiliser le dessus fixe pour certaines raisons internes. J'espérais que la deuxième barre de navigation que j'ai est collante vers le haut pendant que je fais défiler vers le bas. Qu'est-ce que je fais mal? voici mon 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 -->Cela ne fonctionne pas car le conteneur "principal" parent n'a pas de hauteur significative. Si vous déplacez votre div de 2000px de hauteur en main, cela fonctionnera et sticky-top doit être utilisé sur l'élément qui est un enfant immédiat de "main".
Démo: https://www.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>
Connexes: Comment placer une barre de navigation sous la barre de navigation en utilisant bootstrap 4?
Une autre chose à vérifier est de savoir si un élément parent a l'une de ces propriétés css définies:
overflow overflow-y overflow-x Si cette propriété est définie sur l'une de ces valeurs, elle ne fonctionnera PAS: auto, masqué, superposition, défilement.
La meilleure solution est de le supprimer ou de changer sa valeur en 'unset' 