I've been working on my homepage layout and encountered an issue with positioning the content below the navbar, which is centered on the page. Every time I adjust the window height, the content shifts. How can I ensure that it stays fixed below the navbar? Here's the CSS code I'm using:
.content {
position: relative;
height: 100vh;
transition: 0.3s;
}
.homeNav {
transition: 0.3s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.homeContent {
position: absolute;
transition: 0.3s;
top: 65%;
}
This is my HTML structure:
<body>
<div class="container content">
<nav class="homeNav" id="all">
<img src="/images/400x200.png" class="img-fluid mx-auto d-block" />
<div class="row bg-info">
NAVIGATION BAR CONTENT HERE
</div>
</nav>
<div id="main-page" class="homeContent">
</div>
</div>
</body>
Note that this setup involves a single-page application, where the content for main-page is loaded from a separate HTML file.