highlight active page in navigation bar with common header

Question

I'm new in the web programming. I made a simple website with a common header. My header is in a folder called inc/common_header.php and i included this header in all my other pages. The header is working good so far, but i want to put different color in the nav menu for the current page. I tried this solution:

<?php 
if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"';
?>

This solution is working good but my problem is that i have the navigation bar in a separate page and when i click, the result is always the same inc/common_header.php and not the current page.

Here is my code:

common_header.php

<nav class="navigation-bar fixed-top">
<nav class="navigation-bar-content">
    <a class="element brand" href="/"><span class="icon-grid-view"></span> COMPANY NAME</a>

    <span class="element-divider"></span>

    <a class="element brand" href="/"><span class="icon-home"></span> HOME</a>
    <div class="element">
        <a class="dropdown-toggle" href="#"><span class="icon-printer"></span> SERVICES</a>
        <ul class="dropdown-menu" data-role="dropdown">
            <li><a href="#">SERVICE 1</a></li>
            <li><a href="#">SERVICE 2</a></li>
            <li><a href="#">SERVICE 3</a></li>
            <li class="divider"></li>
            <li><a href="#">SERVICE 4</a></li>
            <li><a href="#">SERVICE 5</a></li>
            <li class="divider"></li>
            <li><a href="#">SERVICE 6</a></li>
            <li><a href="#">SERVICE 7</a></li>
        </ul>
    </div>

     <div class="element">
        <a class="dropdown-toggle" href="#"><span class="icon-printer"></span> CALCULATOR</a>
        <ul class="dropdown-menu" data-role="dropdown">
            <li><a href="calc_home.php">HOME</a></li>
        </ul>
    </div>

    <a class="element brand" href="about.php"><span class="icon-printer"></span> ABOUT</a>

    <div class="element place-right">
        <a class="dropdown-toggle" href="#"><span class="icon-cog"></span> SETTINGS</a>
        <ul class="dropdown-menu place-right" data-role="dropdown">
            <li><a href="#">MY ACCOUNT</a></li>
            <li><a href="#">MY PRODUCTS</a></li>
            <li class="divider"></li>
            <li><a href="#">LOG OUT</a></li>
        </ul>
    </div>
    <span class="element-divider place-right"></span>
    <button class="element image-button image-left place-right"> USERNAME <img src="img/me.jpg"/></button>
</nav>

Thanks in advance for your help. I will appreciate it.

score 1 · Answer 1 · answered Nov 20 '14 at 22:11

I will assume that your problem is this:

You have a common section of the pages on your site (the header) in a file 'common_header'. You include that file 'common_header' in all the pages of your site (for example: home, about, services, products, contact). But in one of those pages (for example: contact) and just in that page, you want to show the header with a different style.

If that is your issue, my solution is:

In your 'common_header' page use this php code instead of the one you have:

if(isset($specialPage) && $specialPage == "this is the special page"){
    echo 'class="current"';
};

Then, in your 'contact' page (that I'm using as an example), you write this before including your header page:

$specialPage = "this is the special page";
include("your header page");

Again, if this is not what you want, I'm apologize for misunderstanding your question.

Thank you for your help. Verhaeren, you're so close of what i need. I have a navigation bar in a php file (common_header.php) and i have some pages (like index.php, about.php, contact.php, etc) i want to change the color of the text on the navbar depending of the current page. I mean if the user is in the contact page, the name contact on the navbar should be, for example, red. The problem is that when i use the solution posted before ($_SERVER['PHP_SELF']), i put this code in the common_header.php, the server return common_header.php instead of contact.php or index.php. — Carlos, Nov 21 '14 at 12:53

score 0 · Accepted Answer · edited May 23 '17 at 12:27

Try changing one of your href to about.php and see if it works. Example:

       <ul class="dropdown-menu" data-role="dropdown">
        <li><a href="about.php">About</a></li>
        //etc

As it stands your hyperlinks go to your index.php, which gives that same value to the PHP_SELF super, thus never agreeing with about.php. At least that what I can see by this limited code sample. If that doesn't work, please edit your question to include the output of $_SERVER['PHP_SELF'], which should give you the clue anyway.

Moreover there's no reason to use strpos when comparing strings; use the === operator instead, which checks if arguments are of the same type as well as if they have the same value.

@Carlos What's the output of `$_SERVER['PHP_SELF']`? – rath Nov 21 '14 at 14:01 — rath, Nov 21 '14 at 14:01

highlight active page in navigation bar with common header

2 Answers2