Why are the form inputs or buttons overlapping my navigation header? Everything works fine when I don't use bootstrap 4.
I need the header to always be on top of all elements in my website.
Is there a way to resolve this using only Bootstrap without involving additional Javascript?
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
.form-control {
width: 40%;
}<div class = "container-fluid">
<div class="top-container">
<h1>Main Header</h1>
<p>Keep scrolling to observe the sticky effect.</p>
</div>
<div class="header" id="myHeader">
<h2 class = "navbar fixed-top">Navigation Header</h2>
</div>
<div class="content">
<div class = "row">
<div class = "col-sm-12">
<form action = "#" method = "post">
<div class = "form-group">
<label>Name:</label>
<input type = "text" name = "name" class = "form-control" />
</div>
</form>
</div>
</div>