我最近在react应用程序中添加了一个引导导航栏,但是当我切换部分时,它无法正确显示。从主页到服务页面。我希望在切换页面时显示深色导航栏
这是我的导航栏的HTML代码
<nav className="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div className="container">
<a className="navbar-brand js-scroll-trigger" href="#page-top"><img src="assests/img/navbar-logo.svg" alt="" /></a>
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu <i className="fas fa-bars ml-1"></i>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav text-uppercase ml-auto">
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#services">Services</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#portfolio">Faciltities</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#about">About</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#team">Owners</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
答案 0 :(得分:0)
只需在样式标签中将导航栏颜色触发为黑色...
<style>
.navbar-dark{
color: black;
}
</style>
答案 1 :(得分:0)
尝试创建样式表并将其链接到标题中。
这是要包含在头部的代码。这将链接到名为“ styles.css”的样式表中:
<link rel="stylesheet" href="styles.css"/>
在此样式表中,尝试以下操作:
#darkNavbar{
color : black
}
这将使id = "darkNavbar"
属性为黑色。
我已经更新了您的代码,以删除类navbar-dark
,并为导航栏提供了darkNavbar
ID。
<nav id="darkNavbar" className="navbar navbar-expand-lg fixed-top" id="mainNav">
<div className="container">
<a className="navbar-brand js-scroll-trigger" href="#page-top"><img src="assests/img/navbar-logo.svg" alt="" /></a>
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu <i className="fas fa-bars ml-1"></i>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav text-uppercase ml-auto">
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#services">Services</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#portfolio">Faciltities</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#about">About</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#team">Owners</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
试一下。让我知道是否有帮助。