EDIT: example of desired effect here
SECOND EDIT: The answer was actually very simple, I had previously split my header and footer into a separate file and accidentally placed the navbar outside the body tag. Once I moved it inside there and set my background in the body tag, then used the background-color selector with property rgba(5,5,5,0.5) for the navbar, everything was fine.
As you can see I have a navbar and a banner. Currently I am using the sticky-top class for navbar. The navbar is transparent.
I want the navbar to follow me down the page, as this is a single page design and the navbar are hash links. However, I also want the navbar to overlap with the next element AND be centered (like I said: transparent). The page should start at the top of that background image in the next element, with the navbar overlapping.
I tried position: absolute, which did lower the navbar but then it was fixed and all the way to the left.
I have also tried the suggestion in this thread which suggests adding a custom class to the navbar and increasing the top element like so :
.sticky-offset {
top: 56px;
}
However, that only pushes it down permanently and there is still a white space above the next element. I then tried to decrease the body size but that also did not work.
I have also tried adding overflow: auto to the navbar class, which did nothing.
Here is my html:
<div id="navbar-main" class="navbar sticky-top sticky-offset navbar-
expand-md navbar-light px-auto mx-auto">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<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 class="collapse navbar-collapse justify-content-center"
id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-item nav-link active" href="#section-banner">Home<span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#section-timeline">Our Journey</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#section-gallery">Party
Photos!!!</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#section-special">Special
Thanks</a>
</li>
<hr>
<li class="nav-item">
<a class="nav-item nav-link" href="logout_dummy.php">Logout</a>
</li>
</ul>
</div>
</div>
<section id="section-banner" class="parallax">
<h1>Test</h1>
</section>
CSS:
html {
scroll-behavior: smooth;
}
/* float clearing for IE6 */
* html .clearfix{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
*+html .clearfix{
min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
.container {
width: 100%;
height: 100%;
}
/*
#section-carousel{
}
.carousel{
z-index: -99;
}
.carousel-indicators li{
background-color: black;
}
.carousel-indicators .active{
background-color: red;
}
*/
img.rounded-circle{
height: auto;
width: auto;
}
.license{
text-aling: center;
}
body {
height: 90%;
}
.navbar-nav > .nav-item > a {
position: relative;
}
header, p {
text-align: center;
}
html,
body {
height: 175% !important;
}
header {
height: 4em;
background: #845;
}
.parallax {
background-image: url("../../images/web_ready/welcome_banner.png");
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
font-size: 4em;
padding: 15rem 0;
color: white;
background: rgba(29, 25, 29, 0.37);
font-family: "Trebuchet MS"
}
