РЕДАКТИРОВАТЬ: пример желаемого эффекта здесь
ВТОРОЕ РЕДАКТИРОВАНИЕ: Ответ был на самом деле очень прост, я ранее разбил свой верхний и нижний колонтитулы в отдельный файл и случайно поместил панель навигации снаружитег body.Как только я переместил его туда и установил фон в теге body, затем использовал селектор цвета фона со свойством rgba (5,5,5,0.5) для панели навигации, все было хорошо.
Как видите, у меня есть панель навигации и баннер.В настоящее время я использую класс sticky-top для navbar.Панель навигации прозрачна.
Я хочу, чтобы панель навигации следовала за мной по странице, поскольку это одностраничный дизайн, а панель навигации - это хеш-ссылки.Тем не менее, я также хочу, чтобы панель навигации перекрывалась со следующим элементом И центрировалась (как я уже сказал: прозрачный).Страница должна начинаться сверху этого фонового изображения в следующем элементе с перекрытием навигационной панели.
Я попробовал положение: абсолютное, что уменьшило навигационную панель, но затем оно было зафиксировано и полностью влево.
Я также попробовал предложение в этом потоке, которое предлагает добавить пользовательский класс в панель навигации и увеличить верхний элементвот так:
.sticky-offset {
top: 56px;
}
Однако, это только толкает его навсегда, и над следующим элементом все еще остается пустое пространство.Затем я попытался уменьшить размер тела, но это также не сработало.
Я также попытался добавить переполнение: auto в класс navbar, но ничего не сделал.
Вот мой 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"
}