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
John Levy
1,451 PointsHaving issues with the nav bar
I am trying to make the elements in the nav bar stay highlighted when the user is on that page. In my example I am trying to make the app page stay green when the user is on that page. It works until I add the code on lines 12-55. When I add this code it stops working but I cannot figure out why. What am I doing wrong with the rest of the code for it not to work? I have attached my code below http://codepen.io/Johned22/pen/zKPQZp Thanks in advance
4 Answers
krisd87
280 PointsHi John,
Your issue is cause by CSS specificity - which determines which CSS rules are applied for a certain element. In your example, the .active rule has lower specificity than .nav-list a, thus the final rendered color will be blue.
You can check out more about specificity and how to calculate it here (although article is old, it is well structured and easy to grasp): https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/.
After reading about specificity you should be able to fix the issue yourself. Let me know if you still have trouble solving this.
Further more, CodePen also provides an integrated css validator that can help you to deal with syntax warnings and erros. (go to CSS option menu and click Analize CSS). You will see several errors reported.
It is a good practice to check that your code is correctly written. You can use: https://validator.w3.org/ for HTML and http://www.css-validator.org/ for CSS.
Best regards, Cristina
Daniel Gonzalez
22,105 PointsHi John,
The best way to make your selected nav link display "highlighted" when the user is on that page is to add a class to that nav link that changes the background-color or the color of the text to a different color than the rest of the navbar. This class can be added and removed using jQuery.
John Levy
1,451 PointsThanks for the response. Why does it work until I add the code from line 12-55 in the CSS though? I have played around with the code and cant figure out why it stays highlighted until I add the code from line 12-55. Thanks
John Levy
1,451 PointsThanks for your help. I will check out the css validator in CodePen.