Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Isha Srivastava
5,002 PointsChanging bootstrap navbar background color and font color, Please Help!!
Hi, I have just started learning bootstrap and wanted to change the background and text color in a bootstrap navbar but it's not changing as expected..
Here is my custom CSS:
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
And the relevant HTML:
<div class="navbar navbar-inverse navbar-fixed-top navbar-custom">
<div class="container">
<a class="navbar-brand text-muted" href="#">Ribbit</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Ribbit</a></li>
<li><a href="#">Treehouse</a></li>
</ul>
</div>
</div>
</div>
I can't figure out why this won't change the background and text-color - can anyone help?
7 Answers
Isha Srivastava
5,002 Pointshey Wayne Priestley and Ashley Franklin, i got the answer by putting this in my-style.css
.navbar-default {
background-color:teal;
background-image: none;
background-repeat: no-repeat;
}
the html file was actually linked to the bootstrap-theme.min.css file also as it was mentioned in the Guil Hernandez's course of frameworks basics in stage 2 in video 6, so i found that the .navbar-default class was having some background image with the gradients and when i did it none here in the above code it worked..
so, thanks guys for helping me out. :)
Ashley Franklin
17,633 PointsHey Isha, it looks like it should be working from what you've provided!
Where are you placing your custom css? (bottom/top of the page directly, in the bootstrap css, separate stylesheet, etc.) The only thing I can think of is that it's getting loaded before the bootstrap css so it's being overwritten :)
If that is the case, just switch 'em around and you should see your css start working it's magic; so if you have:
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
Switch it to:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
Isha Srivastava
5,002 Pointshi, Ashley Franklin,
its like this in my html
<head>
<title>Ribbit - A Treehouse Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link href="css/my-styles.css" rel="stylesheet" media="screen">
</head>
but still its not working..
Wayne Priestley
19,579 PointsHi Isha,
Have you tried
.navbar {
color: #FFFFFF;
background-color: #CC3333;
}
/* OR*/
.nav {
color: #FFFFFF;
background-color: #CC3333;
}
Hope this helps.
Isha Srivastava
5,002 Pointshi Wayne Priestley, yeah i have tried both the first syntax is not working at all and the second syntax is only working for nav list items.. :(
Wayne Priestley
19,579 PointsHi again Isha,
Here it is,
.navbar-default {
background-color: #???;
border-color: #???;
}
Hope this helps.
Isha Srivastava
5,002 Pointshey Wayne Priestley, its still not working.. :(
here is the css code
.navbar-default{
background-color:red;
border-color: green;
}
and here is the html where i have replaced the class "navbar-inverse" with "navbar-default" class.
<div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <a class="navbar-brand text-muted" href="#">Ribbit</a> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Ribbit</a></li> <li><a href="#">Treehouse</a></li> </ul> </div> </div> </div>
the only thing which is getting changed is the border color in green but the background is still white...
Isha Srivastava
5,002 Pointshey Wayne Priestley , its still not working.. :(
here is the css code
.navbar-default{ background-color:red; border-color: green; }
and here is the html where i have replaced the class "navbar-inverse" with "navbar-default" class.
<div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <a class="navbar-brand text-muted" href="#">Ribbit</a> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Ribbit</a></li> <li><a href="#">Treehouse</a></li> </ul> </div> </div> </div>
the only thing which is getting changed is the border color in green but the background is still white.. :(
Wayne Priestley
19,579 PointsHey Isha,
can you add nav tag and navbar-default to your code,
<nav class="navbar navbar-default"> /* add the nav tag */
<a class="navbar-brand text-muted" href="#">Ribbit</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Ribbit</a></li>
<li><a href="#">Treehouse</a></li>
</ul>
</div>
</nav>/* close the nav tag*/
then add
.navbar-default {
background-color: #???;
border-color: #???;
}
Ashley Franklin
17,633 PointsThat's odd! One thing I missed before (assuming it's that main "Ribbit" that you want the colour to change for) is that it would need to be:
.navbar-custom a {
color: #fff;
}
The background colour should be changing though. Do you have you project uploaded online, or a jsfiddle/codepen of it that we could take a look at?
ariel dumapias
238 PointsYou can just override using this .navbar-custom { color: ?; background-color: green !important; }
Also make sure that your Css is loaded after bootstrap CDN so that it will not get override by Bootstrap default codes.
Hope that helps