CODEWITHSUNDEEP
htmltwitter-bootstrap-3
anuar ditucalan
anuar ditucalan

Reputation: 55

changing font color in bootstrap nav bar

I am making my own website and I've struggled with this nav bar. I try to change the font color using CSS but it didn't even change the color. But the background does. I want to manipulate my navbar color with color that I want.

Here is the code

 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="style.css">
</head>
	<body>
        <!--- Nav menu--->
		<div class="bs-example">
    <nav class="navbar navbar-light navbar-custom   "style="background-color:#5bb85b;color:white;   ">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Anuar</a>
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Messages</a></li>
            </ul>
          
        </div>

    </nav>

Upvotes: 1

Views: 2131

Answers (3)

Mohammad Javad Noori
Mohammad Javad Noori

Reputation: 1227

use this:

.collapse ul li a{
  color:white
}

.navbar-brand{ 
  color:white
}

Online Demo

Upvotes: 1

Hp_issei
Hp_issei

Reputation: 577

Specify the color you want in the background-color you want and add these lines in your css file 



    

        .navbar-header
        {
            background-color:red;
        }
        .navbar-collapse
        {
                background-color:red;

        }

Hope it helps you

Upvotes: 0

Efemorav
Efemorav

Reputation: 143

<nav class="navbar navbar-light navbar-custom" style="background-color: #5bb85b; color: white !important;">

But I recommend not using inline css, also you should note that an inline !important is not overrideable.

Upvotes: 0

Related Questions