Change CSS on PHP Included header

Question

I want to use <?php include 'header.php';?> to include a header for every page of my website, so that I only need to change the header on one place. The website will reuse the header on more than 20 different pages in total. What I am wondering is how I can change the specific highlighted text when using php include?

I have created a website which has a header with 5 links (Home, Portfolio, About, Contact and Store). Currently I am using CSS code to show the user what part of the site they are on by highlighting the selected link (Page).

In the example below the Home "link" is highlighted in white. (See CSS code below.)

The following code is in the header:

<nav>
<ul>
    <li><a id="selected" href="index.html">Home</a></li>
    <span>|</span>
    <li><a href="portfolio.html">Portfolio</a></li>
    <span>|</span>
    <li><a href="about.html">About</a></li>
    <span>|</span>
    <li><a href="contact.html">Contact</a></li>
    <span>|</span>
    <li><a href="store.html">Store</a></li>
</ul>
</nav>

CSS Code:

/* Selected Link */
#selected {
color: white;
}

Do I require some code that detects parts of the website or can I manually manipulate the highlighted link in some easy way? What would be the best practice for this sort of thing. Thank you for any input.

Narek Zakarian · Accepted Answer · 2019-07-23 15:18:57Z

3

You can add $pageName variable to every page before including the header. For example on home :

$pageName = 'home';
<?php include 'header.php';?>

....

And inside header.php

<nav>
<ul>
    <li><a id="<?php echo $pageName == 'home' ? 'selected' : ''?>" href="index.html">Home</a></li>
    <span>|</span>
    <li><a href="portfolio.html">Portfolio</a></li>
    <span>|</span>
    <li><a href="about.html">About</a></li>
    <span>|</span>
    <li><a href="contact.html">Contact</a></li>
    <span>|</span>
    <li><a href="store.html">Store</a></li>
</ul>
</nav>

edited Jul 23, 2019 at 15:18

Narek Zakarian

2151 silver badge10 bronze badges

answered Jul 23, 2019 at 14:31

Berkay

1032 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Elias Wick Over a year ago

This might be exactly the thing I am looking for. But, let's say that I will add 20 other links in the future. That will mean that there will be a whole lot of unused variables as I will only set one "selected". Are there any other alternatives which would allow me to simulate a similar result without as many variables. or maybe even another method than php include? If you can't come up with a better method I will accept your answer. Thank you for all the help! :)

Berkay Over a year ago

You right. Maybe you can use current script name instead of declare a variable. You can get current script with basename(__FILE__)

Elias Wick Over a year ago

Thank you, that is very helpful! Have a great day!

ni3solanki · Accepted Answer · 2019-07-23 14:52:28Z

1

this is work for you :

//PHP :

$curr_page = $_SERVER['REQUEST_URI']; // or basename(__FILE__)

//HTML :

<nav>
<ul style="background: #c02828;">
    <li><a <?php if (strpos($curr_page, "index.html") !== false){ ?>id="selected" <?php } ?> href="index.html">Home</a></li>
    <span>|</span>
    <li><a <?php if (strpos($curr_page, "portfolio.html") !== false){ ?>id="selected" <?php } ?> href="portfolio.html">Portfolio</a></li>
    <span>|</span>
    <li><a <?php if (strpos($curr_page, "about.html") !== false){ ?>id="selected" <?php } ?> href="about.html">About</a></li>
    <span>|</span>
    <li><a <?php if (strpos($curr_page, "contact.html") !== false){ ?>id="selected" <?php } ?> href="contact.html">Contact</a></li>
    <span>|</span>
    <li><a <?php if (strpos($curr_page, "store.html") !== false){ ?>id="selected" <?php } ?> href="store.html">Store</a></li>
</ul>
</nav>

edited Jul 23, 2019 at 14:52

answered Jul 23, 2019 at 14:51

ni3solanki

5223 silver badges12 bronze badges

2 Comments

Elias Wick Over a year ago

What is the difference of ($_SERVER['PHP_SELF'] == and your $_SERVER['REQUEST_URI'];

ni3solanki Over a year ago

Please reffer this link to know detail : stackoverflow.com/questions/16980343/…

Collectives™ on Stack Overflow

Change CSS on PHP Included header

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related