I am currently working on designing a two-layered navbar structure. The top layer contains essential company information such as phone number, email address, social media links, and more.
The second layer serves as the main navbar, designed to be sticky and transparent.
However, I am facing an issue where the second layer is not overlaying on top of the following div but is instead pushing it down, creating a blank space. Despite using Bootstrap 4, I am unable to identify the root cause of this problem.
#top-nav{
position: relative;
z-index: 1000;
}
.top-nav{
background-color: #FFF;
height: 40px;
}
.top-nav a{
color:#696969;
}
.top-nav a:hover{
color:#FF6700;
}
.top-nav p{
margin-left: 50px;
position: relative;
top:5px;
color: #696969;
}
.top-nav .social-links a{
padding-right: 20px !important;
position: relative;
top: 5px;
color: #696969;
}
.top-nav .social-links a:hover{
color: #ff6700;
}
#content{
height:100%;
width:100%;
}
.navbar-brand img{
width: 300px ;
height: auto ;
}
@media screen and (max-width:500px){
.navbar-brand img{
width:250px;
}
#content{
/* top: - */
}
}
@media screen and (min-width: 500px){
.navbar-brand img{
margin-left: 20px;
}
}
.first{
height: 100vh;
background-color: #000;
position: relative;
z-index:0;
/* position:relative;
top:-115px; */
}
.second{
min-height: 100vh;
background-color: #676767;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="top-nav" class="container-fluid text-center">
<div class="container row top-nav justify-content-between ml-auto mr-auto">
<div class="call .col-auto mr-auto">
<p><b>Contact: </b><a href="tel:+11111111">+111111111</a></p>
</div>
<div class="call .col-auto mr-auto">
<p><b>Email: </b><a href="emailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3e3233293c3e291d252427733e3230">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284b47465c494b5c6849505152064b4745">[email protected]</a></a></p>
</div>
<div class="col-auto social-links">
<a href="#"><i class = "fab fa-facebook-f"></i></a>
<a href="#"><i class = "fab fa-skype"></i></a>
<a href="#"><i class = "fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-transparent sticky-top">
<a class="navbar-brand" href="index.html">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<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="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="first"></div>
<div class="second"></div>