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 Stu Cowley
Stu Cowley
26,287 Points

BootStrap Nav Pills Dropdown Link Hover

Hey guys,

I'm building a site and I am utilising the Bootstrap framework as it saves me a lot of development time.

The Issue

I have a collection of links a couple of dropdown links and the rest are just regular links.

I have managed to successfully change the hover state of the links without a dropdown menu by giving them a different background colour.

But the problem I am having is that I cannot change the background colour of the links that have a dropdown menu.

I have been trying to resolve the issue in my custom styles stylesheet (styles.css) using the following CSS code

/* --- nav-pills --- */
.nav-pills {
    padding-top: 20px;
}

.nav-pills > li > a {
    font-size: 15px;
    color: #37404e;
    border-radius: 5px 5px 0 0;
    padding: 10px;
}

.nav-pills > li > a:hover {
    background-color: #418bca;
    color: #fff;
}

/* --- dropdown-menu --- */
.dropdown-menu {
    margin-top: -5px;
}

.dropdown-menu > li {
    font-size: 15px;
}

.dropdown-menu > li > a {
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
}

.dropdown-menu > li > a:hover {
    background-color: #ff6347;
    color: #fff;
}

.dropdown-header {
    color: #418bca;
}

I just can't seem to find a fix for this.

Any advice on how this can be fixed would be greatly appreciated!

Thanks in advanced

Stu :)

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Stu,

Are you saying that this css isn't taking effect?

.dropdown-menu > li > a:hover {
    background-color: #ff6347;
    color: #fff;
}

Are you able to use your browser's dev tools to see what styles are taking effect?

1 Answer

Sander de Wijs
PLUS
Sander de Wijs
Courses Plus Student 22,267 Points
Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

I agree with Jason, your custom styles are proberaly overwritten by Bootstrap's CSS. I checked the development version of Bootstrap and it has specific variables for the dropdown-bg colors.

You could try adding !important to your custom CSS

.dropdown-menu > li > a:hover {
    background-color: #ff6347 !important;
    color: #fff;
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Sander,

I would be curious to know why !important is needed if bootstrap isn't using that in the css. !important should be used sparingly and I think only when absolutely necessary.

I found the following in bootstrap:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}

It seems to me that as long as you're matching the selector that bootstrap used then you would be able to override the styles without using !important

I also found some css like the following:

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
background-color: transparent;
}

If that was the background-color that Stu was trying to override, for example, then the original selector Stu posted wouldn't be specific enough and you would want to match that longer selector.

With the css that you have posted, won't that override all links within dropdowns including the ones above in the more specific .navbar-default selector?

Stu Cowley Is it possible that you have your dropdown menu within a navbar class?