Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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 : )

Kevin Korte
Kevin Korte
28,109 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.

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