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 sakatagintoki
sakatagintoki
12,624 Points

Trying to overwrite some stylings of a Bootstrap navbar

I'm trying to cheat a little and reuse one of the navbar stylings from one of Guil's Bootstrap tutorial videos. I've successfully managed to overwrite the background gradient, but the anchor list item text is a bit more stubborn.

I've tried selecting it with various CSS selectors, in this example I'm trying with .nav li a {}.

What class selector do I need to overwrite the text color of the links? Or is there something I can do in the HTML markup?

See first image for navbar + CSS and second image for HTML.

Thx ~Jay

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jay,

I loaded up my local copy of the ribbit prototype site using bootstrap and found the following selector was setting the text color of those links:

.navbar-inverse .navbar-nav > li > a

Assuming I've gone to the right project, this selector that bootstrap is using is more specific than the one you've tried .nav li a

If you match the selector that bootstrap is using then you will be able to override the styles. You'll need a similar selector if you need to override the :hover and :focus states as well.

sakatagintoki
sakatagintoki
12,624 Points

YES! THANK YOU. You've saved me hours of tinkering.

I did try inspecting the bootstrap.css stylesheet and finding the exact selector that was styling the navbar link text. But I didn't try using the > child of selector (haven't really used those for anything since I first learned about them in a tutorial video in October).

If I could give your post +9001 rep I would.

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

The more specific you are, the higher priority it has when it comes to styling your page. You could try giving the <a> tags a class like "nav-link", and then selecting it with ".navbar .nav li a.nav-link" and see if that lets you override Bootstrap's styling.

sakatagintoki
sakatagintoki
12,624 Points

Nay, that didn't work. But thanks for trying.

Perhaps I can try customizing Bootstrap once I've figured out what colors and stylings I really want for this project.

But if anyone knows a way to overwrite it in a author created .css file would be big help.

Sean Do
Sean Do
11,933 Points
Sean Do
Sean Do
11,933 Points

Looks like you're using Google Chrome, you can use the "Inspect Element" tool by right-clicking something in the browser. From there, you can select the html and see what css rule is being applied to that tag. It gives you the filename followed by its corresponding line number for each css rule. That should help you to determine what to edit.

sakatagintoki
sakatagintoki
12,624 Points

Tried that. When I hover over the text it says I'm hoving over the a element or the li a element. And tried using those selectors already.

Perhaps I'll just re-download Bootstrap with a customized navbar, or do without the Bootstrap navbar stylings altogether.

But thanks for trying.