I need to do some modifications to my navbar. I have been trying but unable to do.
*I need to change the font color of the bootstrap navbar.
*My navbar background is transparent, i also need to get rid of the border which comes by default.
*How do I arrange the navbar item list to center alignment.
Please help. Below is the html code.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid the-navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="cover.html">Learning Pulse</a>
<li><a href="Index.html">Home</a>
<li><a href="mycourse.html">Course</a>
<li><a href="#contact">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="signup.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</div>
</nav>
The Css is the code
.navbar {
position:absolute;
top:30px;
z-index:10;
background:transparent;
width:80%;
margin-left:auto;
margin-right:auto;
font-style: times;
font-size:19px;
}
.navbar li a {
color: white;
}
Use any of the . bg-color classes to add a background color to the navbar. Tip: Add a white text color to all links in the navbar with the . navbar-dark class, or use the .
To change the HTML font color with CSS, you'll use the CSS color property paired with the appropriate selector. CSS lets you use color names, RGB, hex, and HSL values to specify the color.
Hence, the background color of an active nav-item can be changed in the following manner by changing the background-color CSS property.
Just a few CSS lines and we got it =)
.navbar {
position:absolute;
top:30px;
z-index:10;
background:transparent;
width:80%;
margin-left:auto;
margin-right:auto;
font-style: times;
font-size:19px;
}
.navbar ul{
text-align:center;
}
#navbar ul li a {
color:red;
}
.navbar{
background:lightblue;
border:none;
}
https://jsfiddle.net/Ldf7xswh/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With