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 Bootstrap 4 Basics (Retired) Using Bootstrap Components Building a Navbar

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Posted by Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

How do I change the text of the navbar when I hover over it?

This is the code I tried wich doesn't work:

nav.navbar-nav li a:hover { color: #3FBF50; }

This is my workspace. https://w.trhou.se/xauywzcaf7. Who can help me with the right code?

7 Answers

Redweb FED
Redweb FED
15,517 Points

For you workspace you appear to be looking for the class nav rather than the tag.

Your code has this: " .nav.navbar-nav. li a:hover "

You should write it like so: " nav.navbar-nav. li a:hover "

Hope this helps

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Ok, so I write nav.navbar-nav.li a:hover { color: #3fbf50; }

But this one doesn't work. Our code is similar by the way, exept for the dot (.) in the begin.

How do I make it work?

Redweb FED
Redweb FED
15,517 Points

Sorry I made a mistake which i've just noticed you should write "nav.navbar-nav li a:hover".

When the css is compiled it looks for "." and "#" as ways to identify classes and id's respectively so while the css was rendering because it couldn't find the ".nav" class with a child of ".navbar" you style were just ignored. However because your syntax was correct no error was thrown.

nav{
    /* In here goes styles for html elements with the tag <nav> */
}

.nav{
    /* In here goes styles for html elements with the class <nav class="nav"> */
}

#nav{
    /* In here goes styles for html elements with the id <nav id="nav"> */
}

Also one last thin to point out is even the slightest difference in referencing anything in your css file will result in the css being ignored. i.e ".Nav" and ".nav" are two separate classes.

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

No problem and thanks for reacting, but when I target with #, or (.) it get's ignored. Can you take a look at my code that I posted before? (Can't take any snapshots anymore)

Redweb FED
Redweb FED
15,517 Points

Sure thing I made a codepen and messed around with it till I got a result I assume you were expecting.

http://codepen.io/Adam_Rusty/pen/GroXXQ?editors=1100

Turns out that using .nav.navbar-nav is fine. the main issue was having a "." at the end of .nav.navber-nav once I removed it the hover worked fine.

nav.navbar-nav. <--- This dot here.

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

This is the code in your codepen the text in the buttons get green.

.nav.navbar-nav li a:hover { color: #3FBF50; }

In my css the code seems to get ignored, because the text doesn't become green.

Redweb FED
Redweb FED
15,517 Points

Try copying my code underneath yours and see if you can find the difference. Its had to tell what the problem is your end so hopefully you can spot whats going on.

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Ok, so this is your code:

.nav.navbar-nav li a:hover { color: #3FBF50; }

My code: .nav.navbar-nav li a:hover { color: #3FBF50; }

It's the same code. I don't understand this, you copy pasted the exact codes from my workspace right?

Redweb FED
Redweb FED
15,517 Points

Yeah I did, I also commented above the change I made to you code as well.

Did it resolve the problem?

Redweb FED
Redweb FED
15,517 Points

I've got good news and bad news the good news it the css is being applied the bad news is its being overruled by what I assume is some bootstrap styling.

To resolve this you can use this:

.nav.navbar-nav li a:hover { color: #3FBF50 !important; }

This effectively tells the browser to apply these styles above all others relating to that property in this case color being overwritten. the only expection to this is if you give a more specific selector the "!important" value as well.

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

I remember the !important function and realize the other code didn't work, because of bootstrap. Thanks for staying to it, until it's solved!