CODEWITHSUNDEEP
htmlcss
Potatosaurus
Potatosaurus

Reputation: 475

Add a class to an ID in CSS

Solution: Followed solution provided by accepted answer.
Excerpt of my code provided below as a clearer solution.

<?php
$active_home = "active";
include('header.php');
?>


<div id="content">
    <title>Welcome to the home page.</title>
    <p>index</p>

</div>

The $active_home must come before the include in order to affect the header file.

<html>
    <head>
        <link rel="stylesheet" href="MainStyle.css" type="text/css" media="screen"/>

    </head>

    <div class="topnav" id="mytopnav">
        <a href="/Index.php" id="homenav" class="<?php echo $active_home; ?>">Home</a>
    </div>
</html>

Currently I have a main CSS sheet, which specifies all the styles of my navigation bar.
I want to provide an indication as to what page the user is on, and the tutorial I followed makes use of a ".active" class which changes the background and text colour.
The trouble is that their method has the active page specified on the navbar. This doesn't work, as what the navbar considers to be the active page never changes.

What I am attempting to do, is add a small style sheet at the start of each page which sets the current page on the nav bar to active.
I can do this very easily if I use something like 

<style>
#homenav{
    background-color: #4CAF50;
}
</style>

To each page, in the above example the home page.
However, this means that if I want to update the style for the active page, I need to change each page individually.

What I'd rather do is something like

<style>
#homenav{
    (add the .active class)
}
</style>

Which makes life easier, however at the moment I am having issues referencing.
Is it possible in CSS to add a class to a particular ID? Failing that, is there a way to declare a variable in the main css that can be referred to in other style sheets?

Main CSS:

* {
  margin: 0;
}

#body{
    margin: 0px;
    padding: 0px; 
    font-family: Calibri;
}

.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

 /*Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

Upvotes: 0

Views: 1369

Answers (1)

Mohammed Akhtar Zuberi
Mohammed Akhtar Zuberi

Reputation: 658

In your current case scenario, you have dynamic pages where you want to highlight the menu in navbar related to the active page. It can be simply achieved using the below logic.

In case you have fixed number of dynamic pages Let's take an example that you have the below navigation bar (menu) items.

  1. Home
  2. About
  3. Services
  4. Contact

In every page, you have dynamic content. What you require will be accomplished with PHP and NOT by HTML/CSS.

Have your Navigation Bar file as a separate file. Name it as you want. For example, nav-items.php and include in your PHP pages.

Now in nav-items.php apply the below logic:

<li id="home" class="<?php echo $active_home; ?>">Home</li>
<li id="about" class="<?php echo $active_about; ?>">About</li>
<li id="services" class="<?php echo $active_services; ?>">Services</li>
<li id="contact" class="<?php echo $active_contact; ?>">Contact</li>

In case you have dynamic pages in terms of count as well and you are not sure about the pages names, use the below code instead.

<?php
    $dynamic_page_name = "Page Name" //This is can be fetched from database
?>

<li id="<?php echo $dynamic_page_name; ?>" class="<?php echo ${"active_" . $dynamic_page_name}; ?>"><?php echo $dynamic_page_name; ?></li> //Since it is an example of dynamic page names, so I am only giving one List Item example.

Now in every PHP page, add the below code.

For example, About will have the below code:

<?php
    $active_about = "active";
?>

In case you have dynamic pages in terms of count as well and you are not sure about the pages names, use the below code instead.

<?php
    $dynamic_page_name = "Page Name" //This is can be fetched from database

    ${"active_" . $dynamic_page_name} = "active";
?>

This will add active class to each page with their specific PHP variables defined for this purpose only. So once the nav-items.php will be loaded in each page, only the relevant page will have active class added to it.

Upvotes: 1

Related Questions