How to position two bootstrap navbar at top on scroll (sticky-top) without overlapping?
Question
I used 2 navbar set to top on scroll using bootstrap 4 sticky-top class. But the problem is 2nd one goes up (overlap) over the 1st one when I scroll and that is why I can not see the 1st one. 2nd One should be placed bellow of the 1st one on scroll. Is there any way to do that? Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body style="height:1500px">
<div class="container-fluid">
<br>
<h3>Sticky Navbar</h3>
<p>A sticky navigation bar stays fixed at the top of the page when you scroll past it.</p>
<p>Scroll this page to see the effect. <strong>Note:</strong> sticky-top does not work in IE11 and earlier.</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>
<div class="container-fluid"><br>
<p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
<p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
<p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
<p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top sticky-top-2">
<a class="navbar-brand" href="#">Logo 2</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>
</body>
</html>
2 answers
solution1
1 ACCPTED 2021-04-25 04:38:00
in bootstrap css, you will find codes like bellow
@supports ((position: -webkit-sticky) or (position: sticky)) {
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 1020;
}
}
for the 2nd navbar, you can copy the code and paste in additional css or custom css and paste with renaming the class like .sticky-top-2 and set the top: 100px or the height value you set for the 1st navbar and then if you want first navbar should drop down over the 2nd navbar just set the z-index value less then the 1020 like z-index: 1019; So, the final code like
@supports ((position: -webkit-sticky) or (position: sticky)) {
.sticky-top2 {
position: -webkit-sticky;
position: sticky;
top: 100px;
z-index: 1019;
}
}
Now change the HTML code where 2nd navbar has the call of .sticky-top to **
.sticky-top2
**
solution2
0 2021-04-24 22:51:01
The problem is that both of them have top: 0; The second navbar must be moved away from the height of the first one.
If you want more detailed help, put in the code
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.