I'm facing an issue with the positioning of my content relative to my navbar. Whenever I add padding-top: 60px;, it does position the content underneath the navbar, but it also pushes the navbar down. What I actually need is for the background to be at the top of the page behind the navbar. How can I resolve this? Right now, both the navbar and background are being pushed down along with the content, when I only want the content to be pushed down.
body {
padding-top: 65px;
margin: 0;
width: 100%;
}
#header {
background-color: grey;
opacity: .7;
width: 100%;
height: 80px;
position: fixed;
z-index: 1000;
}
#logo a {
font-size: 30px;
font-weight: bold;
color: rgb(255, 255, 255);
font-family: 'DIN 1451 Std Engschrift';
margin-top: 5px;
}
#slide1 {
width: 100%;
background: url('sunrise.png') 50% 0 no-repeat fixed;
background-size: cover;
color: #ffffff;
height: 700px;
margin: 0;
padding: 40px 0 260px 0;
}
.content {
margin: 0 auto;
width: 1000px;
}<div id="header">
<div class="content">
<nav id="nav" class="navbar navbar-expand-lg">
<div id="logo">
<a class="navbar-brand" href="#">Navbar Logo</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="logo">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<a class="nav-item nav-link" href="#slide3">How it Works</a>
<a class="nav-item nav-link" href="#slide4">For Landlords</a>
<a class="nav-item nav-link" href="#">F.A.Q</a>
<a class="nav-item nav-link" href="#pricingslide">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<body>
<div id="slide1">
<div class="content">
<h1 id="headline">Use Your Rent To Buy A Home</h1>
<p id="subtitle">Build a credit history, create a down payment,<br> all by just making rent payments thru LikeHome</p>
<h3>Find out how soon you can become a homeowner?</h3>
<%= render '_how_much_buying_form.html.erb' %>
</div>
</div>
</body>
</html>