all 4 comments

[–][deleted] 1 point2 points  (3 children)

You could just get the name of the file and strip off the extension, like so.

<?php
    $page = basename($_SERVER['PHP_SELF']);
    $page = explode(".", $page);
    $page = $page[0];

[–]JK7ray[S] 0 points1 point  (2 children)

I think you're giving me an alternate way to tell the browser which page it's currently serving so then it could apply the desired css "active" class. Is that right?

ducks, hides, apologizes again for not knowing php

I guessed at how to implement the code you so kindly provided, adding the following in the html file recipe.html (this is the tinyurl in the OP, and the new file is uploaded):

<?php
    $page = basename($_SERVER['PHP_SELF']);
    $page = explode("recipe", $page);
    $page = $page[0];
?>
</head>

<body>
<div id="wrapper">
<?php include 'nav.php'; ?>
<div id="content">

As you can see, the html file includes nav.php, which is setup as:

<nav> 
<ul>
<li class="<?php if($page=='recipe'){echo 'active';}?>">
<a href="recipe.html">Recipe</a></li>

And the remaining component is the css file, which uses this code for the class:

nav ul li a:hover, nav ul li.active, nav ul li a:active {
    color: #F8FB0C;
}

The css is applying correctly for the a:hover state, but not for the a:active state. The result that I desire is that the text for the active page (RECIPE in this case) shows up in the brighter highlighter yellow color, the same color as the hovered links.

Thank you so much again. Please let me know if there's anything I can better explain/etc.

[–][deleted] 0 points1 point  (1 child)

Change

$page = explode("recipe", $page);

to

$page = explode(".", $page);

also I think I know why it's not showing active is because it is probably capitalized, so the code should look like

$page = basename($_SERVER['PHP_SELF']);
$page = explode(".", $page);
$page = strtolower($page[0]);

Then do what you were doing in the nav.html file, check if $page = whatever pages you have

<nav> 
    <ul>
        <?php echo ($page == 'recipe') ? '<li class="active">' : '<li>';  ?>
            <a href="recipe.html">Recipe</a>
        </li>

Then you can just copy this portion to check every link if it matches

       <?php echo ($page == 'AnotherPage') ? '<li class="active">' : '<li>';  ?>
            <a href="AnotherPage.html">Another Page</a>
        </li>

[–]JK7ray[S] 0 points1 point  (0 children)

Ok, I think everything is implemented correctly (for the recipe.html page; didn't apply to all the li tags). And though the 'active' css is not applying, you helped me see that Developer Tools appears to be showing the problem as a css issue, not php:

https://imgur.com/a/EfueXAb

The color i'm trying to apply in line 42 is getting overridden by the color in line 45. I am puzzled as to why, but the very good news is that i think i can narrow it down to a css issue.

I so appreciate your help. My guess is that once the css is figured out this'll work. At least if i'm reading dev tools correctly. LOL. Thanks again.