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 James Pask
James Pask
13,600 Points

Bootstrap template copied but showing unexpected hover behaviour on links

Hi everyone

Hope someone can help as I have a client who is being driven mad by this puzzle. He has copied the bootstrap template from here http://getbootstrap.com/examples/justified-nav/ and is amending it before he hands it over to me so I can help him convert it to a WordPress site.

On his prototype, when he rolls over the navbar items, each item has a grey hover colour but this behaviour isn't shown on the bootstrap template. I can't see anything different between the template and his prototype.

Does anyone have any ideas on where the grey background is coming from?

1 Answer

Shirleyson Kaisser
Shirleyson Kaisser
9,965 Points

If you use chrome dev tools, you can debug and get exactly where its comming from,

Based on what i saw here on the provided link, its coming from -> nav-justified.css line 44

.nav-justified > .active > a, .nav-justified > .active > a:hover, .nav-justified > .active > a:focus { background-color: #ddd; background-image: none; -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15); box-shadow: inset 0 3px 7px rgba(0,0,0,.15); }

James Pask
James Pask
13,600 Points

Thanks. We'd missed a link to a style sheet so it wasn't picking up what it should have done. All now fixed.