Sticky navbar is pushing content down - html

Question

I'm trying to create a double layered navbar, with the top layer having company info like phone, email, social links, etc.
The second layer is the main navbar, which is supposed to be sticky and transparent.
But right now, it's pushing the next div (first) down and creating this blank space instead of hovering on top of the div. I can't really find the fault with it. I'm using Bootstrap 4.
#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>[phone]</p>
</div>
<div class="call .col-auto mr-auto">
<p><b>Email: </b>contact#axyz.com</p>
</div>
<div class="col-auto social-links">
<i class = "fab fa-facebook-f"></i>
<i class = "fab fa-skype"></i>
<i class = "fab fa-linkedin-in"></i>
</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>

Answer 1

A sticky positioned element will take up it's space as it is positioned relatively until it is scrolled past and becomes sticky (then it doesn't say what should happen to that space).
Not sure if what the below is after, but I have just moved the sticky class onto a separate container div and given that a height of 0 with overflow visible, that way it doesn't take up any space
#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;
}
.sticky-top {
height:0;
overflow:visible;
box-sizing:border-box;
}
<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>[phone]</p>
</div>
<div class="call .col-auto mr-auto">
<p><b>Email: </b>contact#axyz.com</p>
</div>
<div class="col-auto social-links">
<i class = "fab fa-facebook-f"></i>
<i class = "fab fa-skype"></i>
<i class = "fab fa-linkedin-in"></i>
</div>
</div>
</div>
<div class="sticky-top">
<nav class="navbar navbar-expand-md navbar-dark bg-transparent">
<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>
<div class="first"></div>
<div class="second"></div>
https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

Instead of using sticky-top use fixed-top, the sticky property will maintain the space of the element in the normal flow that is why you see that space..
#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://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CRoboto%7CJosefin+Sans:100,300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/fa-svg-with-js.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/normalise.css">
<link rel="stylesheet" href="css/style.css">
<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>[phone]</p>
</div>
<div class="call .col-auto mr-auto">
<p><b>Email: </b>contact#axyz.com</p>
</div>
<div class="col-auto social-links">
<i class = "fab fa-facebook-f"></i>
<i class = "fab fa-skype"></i>
<i class = "fab fa-linkedin-in"></i>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-transparent fixed-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>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/fontawesome-all.min.js"></script>

Answer 3

If you want the 2nd navbar background to be transparent, you have to make the sure the color of content in the navbar can be seen over the different background colors...
.sticky-top .navbar-nav .nav-link,
.sticky-top .navbar-nav .active .nav-link {
color: #cc00dd;
}
https://www.codeply.com/go/ypn9gieMza