Components going under the navbar - html

Question

My container elements like paragraphs, header and buttons are going under my navbar. The navbar has the property of fixed-top. I have used previous suggestions from other stackoverflow posts like this (twitter bootstrap navbar fixed top overlapping site). But nothing seems to work for me.Here is my navbar code.
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand text-white" href="#"> Bacon Bacon</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link text-white" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
My container code
<div class="container-fluid bg-overlay">
<div class="row text-center">
<h1>Loren Inpsum</h1>
<h4>Loren Inpsum Loren Inpsum Loren Inpsum Loren Inpsum </h4>
<button type="button" class="btn btn-primary btn-lg">Get Started</button>
</div>
</div>
My CSS
#media (max-width: 979px) {
body {
padding-top: 70px;
}
}
.navbar {
margin-bottom:0px;
background: #FFFFFF;
border-color: #FFFFFF;
padding-bottom:0px;
}
.bg-overlay {
background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("https://unsplash.imgix.net/photo-1416339442236-8ceb164046f8?q=75&fm=jpg&s=8eb83df8a744544977722717b1ea4d09");
background-repeat: no-repeat;
text-align:center;
background-size: cover;
background-position: center center;
color: #fff;
height: 450px;
padding-top: 0px;
}
div.container-fluid bg-overlay{
margin-bottom:30px;
}

Answer 1

The only thing you need to addpadding-top outside of MQ.
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 70px;
}
}
.navbar {
margin-bottom:0px;
background: #FFFFFF;
border-color: #FFFFFF;
padding-bottom:0px;
}
.bg-overlay {
background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("https://unsplash.imgix.net/photo-1416339442236-8ceb164046f8?q=75&fm=jpg&s=8eb83df8a744544977722717b1ea4d09");
background-repeat: no-repeat;
text-align:center;
background-size: cover;
background-position: center center;
color: #fff;
height: 450px;
padding-top: 0px;
}
div.container-fluid bg-overlay{
margin-bottom:30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand text-white" href="#"> Bacon Bacon</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link text-white" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid bg-overlay">
<div class="row text-center">
<h1>Loren Inpsum</h1>
<h4>Loren Inpsum Loren Inpsum Loren Inpsum Loren Inpsum </h4>
<button type="button" class="btn btn-primary btn-lg">Get Started</button>
</div>
</div>