CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ahmed
Ahmed

Reputation: 51

Navbar font color

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;
}

Upvotes: 5

Views: 2687

Answers (1)

Yuri Pereira
Yuri Pereira

Reputation: 1995

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/

Upvotes: 4

Related Questions