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

CSS

Posted by Darcy Paterson
Darcy Paterson
Courses Plus Student 1,971 Points

Bootstrap CSS and Navigation

I can not change the background color of the Nav class or element with Bootstrap. The other styles change, like color, however the background color will not. Any ideas?

Here is the HTML

                <div class="row">
                    <div class="col-md-12">
                        <nav role="navigation">
                            <ul class="nav nav-pills nav-justified">
                                <li><a href="index.html">Home</a></li>
                                <li><a href="who.html">Who We Are</a></li>
                                <li><a href="our_home.html">Our Homes</a></li>
                                <li><a href="careers.html">Careers</a></li>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="contact.html">Contact</a></li>
                            </ul>                                                                        
                        </nav>
                    </div>
                </div>

Here is the CSS

nav ul li a {

    color:#007ECF;  
    border-width:1px;
    border-color:#007ECF;
    border-style:solid;
    margin:0 .2em;
    background-color: rgba(23, 134, 145, .2);
}

nav ul li a:hover {

    color:red;
    background-color:rgba(123, 45, 198, .9);

}

1 Answer

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

I made a codepen with the code you posted and the background colours are working fine. I imagine a bootstrap style is conflicting with it.

You have the classes "nav nav-pills nav-justified" on your ul. These may be interfering so would need to be more specific with your CSS rules.

As an extreme example (using all the classes):

nav ul.nav.nav-pills.nav-justified li a:hover {

    color:red;
    background-color:rgba(123, 45, 198, .9);

}

You likely won't need all those classes to override the bootstrap styles, but I'm not familiar with it so I can't tell you which one!

I would start by trying:

nav ul.nav li a:hover {

    color:red;
    background-color:rgba(123, 45, 198, .9);

}