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 Alphonso Jordan
Alphonso Jordan
9,894 Points

Current Page Highlighted

Trying to figure out how to style the current page (in terms of navigation). I know there isn't a :current selector, and it know that it isn't :active either. Trying to understand if its client-side or server side.

Any help would be greatly appreciated. Just point me in the direction lol

4 Answers

Stone Preston
Stone Preston
42,016 Points

This page shows how to do just what your asking. It looks pretty simple and easy to implement : )

James Barnett
James Barnett
39,199 Points

Been there, done that, made a codepen

http://codepen.io/jamesbarnett/pen/ztcDx

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

That is an interesting solution. This is how I do it:

I put this code in my header.php file.

<ul class="nav pull-right">
<li class="<?php if ($section == "home"){ echo "menu-active"; } ?>"><a href="<?php echo BASE_URL; ?     >">Home</a></li>
<li class="<?php if ($section == "about"){ echo "menu-active"; } ?>"><a href="<?php echo BASE_URL; ?>about/">About Us</a></li>
<li class="<?php if ($section == "portfolio"){ echo "menu-active"; } ?>"><a href="<?php echo BASE_URL; ?>portfolio/">Portfolio</a></li>
<li class="<?php if ($section == "contact"){ echo "menu-active"; } ?>"><a href="<?php echo BASE_URL; ?>contact/">Contact</a></li>
</ul>

and than in the index page of each subfolder, I set the $section variable to equal the page name I'm on. PHP will add the "menu-active" li class, which I have styled in my CSS.

Just another way.

Elliott Frazier
PLUS
Elliott Frazier
Courses Plus Student 9,647 Points
Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

Here's the link to the video from Treehouse that explains how Kevin Korte accomplished that.

Kevin Korte
Kevin Korte
28,149 Points

Yeah, Randy taught me!

Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

you learned from the best!

Alphonso Jordan
Alphonso Jordan
9,894 Points
Alphonso Jordan
Alphonso Jordan
9,894 Points

Thanks for all the responses. I've tried all just to have in the back pocket. Thanks