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

PHP

Seth Barthen
Seth Barthen
11,266 Points

Adding active states to my own site

Trying to make my mobile drop down list change state when you are on that current site. Basically instead of the blue color it normally would be it turns to black.

I'm following Randy's guide from his lesson almost verbatim but it's still not working :/

Here is the code that I have on each page(each page has a diff section name obviously).

<?php 
    $section = "cats";
    include 'includes/header.php'; ?>

Here is what I have listed in the header file

            <ul class="mob-nav">
                <li class="<?php if ($section == "home") { echo "current"; } ?>"><a href="index.php">Home</a></li>
                <li class="<?php if ($section == "cats") { echo "current"; } ?>" ><a href="contact.php">Cats</a></li>
                <li class="<?php if ($section == "zen") { echo "current"; } ?>" ><a href="zen.php">Zen</a></li>
                <li class="<?php if ($section == "rants") { echo "current"; } ?>" ><a href="rants.php">Rants</a></li>
                <li class="<?php if ($section == "cooking") { echo "current"; } ?>" ><a href="#">Cooking</a></li>
                <li class="<?php if ($section == "about") { echo "current"; } ?>" ><a href="about.php">About</a></li>
</ul>

And here is what I have on the style sheet.

.current {
    color: #000;  
}

So would anyone know what I'm doing wrong? Again, this menu turns into a drop down menu when it goes into mobile mode.. So I'm wondering if something in there is messing it up, but I don't know why that would affect it at all.

Thanks for any advice!

3 Answers

Based on what you've posted I would guess that you have a color inheritance problem.

You're assigning the black color to the list items. The anchor links wouldn't inherit this color because they've already been assigned a color either by you or the browser. Anchor links can inherit the color of their parent if you set their color property to 'inherit'.

Assuming you don't have a specificity problem you can try doing:

.current a {
    color: #000;  
}

This should set the links to black directly assuming you don't have a more specific selector higher up that is setting them to a different color.

If this is not it then post a little more of the relevant css for this menu.

Jason,

Don't you hate it when someone beats you to the punch as you are trying to post something :D . Anyway, I would like to side with you on the inheritance being one of if not the issue, but since the OP didn't specify the problem we don't know yet. Also, I would like to see what the OP has in his source code as that could tell us the problem (also the dev tools as well). I would also like to know if he included the style.css file altogether as I don't see the inclusion of it in his code.

Cheers!

That's happened too many times. I sometimes walk away from the computer and forget to refresh and not realize several have responded.

I forgot who suggested this but it would be nice to get some type of message informing us that someone else is currently typing an answer.

Anyways, what I gathered is he's trying to style the link of the page you're on black instead of blue. One of the links is going to have a class of "current" and he's probably wondering why it's not black.

Given how high your points are you probably don't remember "Build a simple php application" (assuming you took it) but he's following the technique from there I presume.

Jason,

Yeah, that would be a good tool to have. You are right, it's been a long time since I took the PHP courses and even then I took them just to get the points seeing as I've been a PHP programmer for the past 10 or so years. Last night I was just too tired to try out the code so I just looked at the code displayed and played it in my head. However, I'm more of a back-end developer so if it's a small front-end hiccup, I may not see it at first. Anyhow, hopefully the OP comes back and gives us an update.

Cheers!

Hello,

What exactly is happening that isn't suppose to be happening? Also, look at the page source by right-clicking the page and choosing view page source or just go into the dev tool and view your code. Make sure that what PHP parses and gives to the browser is valid HTML. You might have a small logical error in your code (extra whitespace, something not displaying where it should be, etc) that might be preventing your expected result. Again, since you really didn't specify an issue and just wanted us to view your code, there really isn't a way to troubleshoot as, to me, it looks okay (without me really putting it through any tests). I did not see, however, where you included the style.css file in your code (unless you just omitted it from this post).

Cheers!

Seth Barthen
Seth Barthen
11,266 Points

Hello! Thank you both for the responses.. Sorry it took so long I was stuck at work :(

So I gave that current class the a selector and boom! It worked. Awesome :) Thanks so much!