Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Navbar font color

Tags:

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;
}
like image 327
Ahmed Avatar asked Nov 22 '16 17:11

Ahmed


People also ask

How do you color a navigation bar in HTML?

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 .

How do I change font color in HTML?

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.

How do I change the color of active NAV?

Hence, the background color of an active nav-item can be changed in the following manner by changing the background-color CSS property.


1 Answers

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/

like image 100
Yuri Ramos Avatar answered Sep 25 '22 16:09

Yuri Ramos