我一直在尝试保持navbar,但是当我滚动时,navbar在通过标题部分时就会消失。我将标头部分的高度指定为100VH。我需要navbar改变颜色,这样它就可以在白色背景的其他部分上看到。
<header class="header">
<nav class="navbar navbar-expand-lg navbar-custom fixed-top">
<div class="container">
<a href="#" class="navbar-brand">Sharvanand</a>
<button class="navbar-toggler" data-toggle="collapse" data-
target="#navbarMenu">
<!--<span class="navbar-toggler-icon custom-toggler"></span>-->
<i class="fas fa-bars fa-lg"></i>
</button>
<div class="navbar-collapse collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item active "><a href="#about-me" class="nav-link scroll">About Me</a></li>
<li class="nav-item"><a href="#projects" class="nav-link scroll">Projects</a></li>
<li class="nav-item "><a href="#skills" class="nav-link scroll">Skills</a></li>
<li class="nav-item"><a href="#education"class="nav-link scroll">Education</a></li>
</ul>
</div>
</div>
</nav>
<div class="main-box">
<img src="img/shaggy.jpg" alt="sharvanand">
<h3>Front End Developer</h3>
<div class="text-center">
<a href="https://github.com/Sharvanand" target="blank" class="btn
custom-btn">Visit GitHub</a>
<a href="#" class="btn custom-btn">Download Resume</a>
</div>
</div>
</header>
This is the styling css part
.header {
position: relative;
width: 100%;
height:100vh;
background-image: linear-gradient(
to right bottom,
rgba(1, 9, 49, 0.801),
rgba(90, 105, 148, 0.801)
);
clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(205, 206, 247, 0.8);
text-transform: uppercase;
letter-spacing: 0.3rem;
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.2rem;
text-transform: uppercase;
margin-right: 10px;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
}
不如class=“fixed-top”
尝试class=“navbar-fixed-top”
。也许这能解决你的问题。