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 trialBrandon Brigham
3,716 PointsHow to make left sidebar menu items a specific color when clicked
Hello,
Please take a look at the site I'm working on:
http://www.simplifymedical.com/physicians/
You will see there is a menu bar on the left hand side of the page. When you click a section I want that specific menu item to change to a light green color, otherwise I want them to be black as they are.
Can't seem to figure this out. Please help! Thanks!
Kevin Matsuo
36,064 Pointsusing CSS only, you can add this line of code on line 298 of custom_css.css
.simplify-disc-left-nav ul li:hover a {
color: #8DC63F !important;
}
Brandon Brigham
3,716 PointsThank you Kevin - What about getting rid of the green coloring on the top menu item on left menu bar ?
1 Answer
Kevin Matsuo
36,064 Pointson line 279 of index.html remove the classname 'active' from the class.
line 279: <li class="menu-item active">
this is a css answer to your question, which was posted in the css community. however Ashish is correct in that this site was built with the intention of using jQuery to add and remove the classname to the list items. the classname 'active' is dependent upon css and jQuery, in that once the classname 'active' is added, the color of the list item will remain a green color, which is preferred for UI purposes so that the user can see where on the page they are currently looking at.
best of luck. once you move on to jQuery and JavaScript you can make a more permanent fix for this by adding back in the classname 'active' to the first list item and implement the snippet of jQuery code that Ashish has provided in your site's .js file.
Brandon Brigham
3,716 PointsOk thanks guys - So when clicked on want the color to be green so -
I added the javascript and made the CSS changes you suggested Kevin - what other steps should I take?
Thanks for your time guys
Kevin Matsuo
36,064 Pointsthe code that you copied from Ashish had a small typo in it.
you define a class with a period and a word followed by it, with no space. so instead of 'li . menu-item', it should be 'li .menu-item'
and i see that your site has a bunch of jquery plugin scripts located below the footer, but no script src to a jquery cdn like so: <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> maybe include that near the footer and the jquery function will work.
Brandon Brigham
3,716 PointsWeird - I just tried all that but still not working - I need to get better with jQuery because this is beyond me
Ashish Mehra
Courses Plus Student 340 PointsAshish Mehra
Courses Plus Student 340 PointsYou can use jquery for that