Selected menu item illuminated upon clicking

Seeking some assistance with a specific requirement - when a user visits the application page, I need the icon to remain illuminated. In the image below, my cursor is hovering over it to show the effect. Can anyone confirm if this desired outcome is achievable?

<ul class="mid-menu center-align">

        <li>
            <a class="bannernav-link " href="/<?php echo APP_URL . 'portal/account/'; ?>">
                <img class="bannernav-img nav-L" src="<?php echo THEME_IMG_PATH; ?>account.svg" alt="account page" />
                <img class="bannernav-img nav-M" src="<?php echo THEME_IMG_PATH; ?>mobile-account.png" alt="account page" />
                <span>My Account</span>
            </a>
        </li>

        <?php
        if ( THEME == 'stafforce_onlinereg' || THEME == 'stafforce_perm_portal' ) {
        ?>
            <li>
                <a class="bannernav-link " href="/<?php echo APP_URL . 'portal/details/'; ?>">
                    <img class="bannernav-img nav-L" src="<?php echo THEME_IMG_PATH; ?>profile.svg" alt="account page" />
                    <img class="bannernav-img nav-M" src="<?php echo THEME_IMG_PATH; ?>mobile-profile.png" alt="account page" />
                    <span>Candidate Profile</span>
                </a>
            </li>
        <?php
        } else {
        ?>
            <li>
                <a class="bannernav-link " href="/<?php echo APP_URL . 'portal/cvupload/'; ?>">
                    <img class="bannernav-img nav-L" src="<?php echo THEME_IMG_PATH; ?>profile.svg" alt="account page" />
                    <img class="bannernav-img nav-M" src="<?php echo THEME_IMG_PATH; ?>mobile-profile.png" alt="account page" />
                    <span>CV Upload</span>
                </a>
            </li>
        <?php
        }
        ?>

        <li>
            <a class="bannernav-link " href="/<?php echo APP_URL . 'portal/basket/'; ?>">
                <img class="bannernav-img nav-L" src="<?php echo THEME_IMG_PATH; ?>basket.svg" alt="account page" />
                <img class="bannernav-img nav-M" src="<?php echo THEME_IMG_PATH; ?>mobile-basket.png" alt="account page" />
                <span>Job Basket <?=$this->formatBasketCount($this->basketCount)?></span>
            </a>
        </li>
        <li>
            <a class="bannernav-link " href="/<?php echo APP_URL . 'portal/applications/'; ?>">
                <img class="bannernav-img nav-L" src="<?php echo THEME_IMG_PATH; ?>applications.svg" alt="account page" />
                <img class="bannernav-img nav-M" src="<?php echo THEME_IMG_PATH; ?>mobile-app.png" alt="account page" />
                <span>Application</span>
            </a>
        </li>
        <li>
            <a class="bannernav-link " href="/<?php echo APP_URL . 'portal/downloads/'; ?>">
                <img class="bannernav-img nav-L" src="<?php echo THEME_IMG_PATH; ?>downloads.svg" alt="account page" />
                <img class="bannernav-img nav-M" src="<?php echo THEME_IMG_PATH; ?>mobile-downloads.png" alt="account page" />
                <span>Downloads</span>
            </a>
        </li>
    </ul>

https://i.sstatic.net/P8f54.png

Answer №1

Let's say your preferred style is color:white

To indicate the active page, assign a class to the corresponding icon

Then add the following CSS:

.activeTab {
  color: white;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

preventing a button from triggering the same event repeatedly

Currently, I am using a script that adds a new row after the tr where my button is located. Unfortunately, I do not want the same button to generate more than one tr. Here is the script in question: <script> $(function() { var done; $(' ...

Shrink Font-Awesome icon sizes using a Node.js and Express.js web application

Currently, I am in the process of developing a website using node.js + express.js and implementing font-awesome for icons. The local hosting of Font-awesome has resulted in a 1.2 MB JS file [font-awesome.js], even though we are only utilizing 10-15 icons. ...

Unable to adjust the width of a label element using CSS specifically in Safari browsers

Here's the issue I'm facing with my HTML code <input type="checkbox" asset="AAA" name="assets[AAA]" value="AAA" id="assets[AAA]" class="c_green" checked="checked"> <label for="assets[AAA]"></label> In my CSS, I have the follow ...

JQUERY inArray failing to find a match

I'm at my wit's end working with inArray and I'm really hoping for some help. I am using AJAX to fetch userIDs from my database, which come through as a JSON-encoded array. However, no matter what I try, I always get a -1 when trying to mat ...

HTML table row content should be aligned to the left side

I am attempting to align the data in the 'Address' column without any margin. I want it to start from the left since it's overflowing. You can find the HTML, CSS, and JS code here Even though I tried using <td align="left">..</td& ...

Aligning Bootstrap Buttons

How do I create a gap between my Bootstrap4 button and the top of the table, while also aligning it to the edge of the table? <div class="container"> <div class="table-title"> <div class="row"> ...

Ensure that each row contains no more than 5 items, and use flexbox to automatically resize

I currently have the following setup: .container { background: gray; width: 600px; display: flex; flex-flow: row wrap; position: relative; } .item { background: blue; width: auto; height: auto; margin: 4px; flex: 1; flex-basis: 20% ...

How can I utilize jQuery to add tags in a box?

I have an idea for a feature similar to the Stack Overflow tag insert. My goal is to have a box where I can type in a tag, click 'Add', and see it appear above. Additionally, I want this action to update an array called 'SelectedTags'. ...

How to manipulate wrapping behavior in flexbox

My flex container holds three divs, arranged in two rows: First row: One div with a fixed width Another div that should stretch to fill the remaining space Second row: Just one item However, the first div stretches to 100% width and pushes the seco ...

Implementing the History API to dynamically load content into a div using Ajax

On my WordPress site, I have post content that loads into a div using AJAX when a user clicks on it. Now, I'd like to update the URL for the current post without using hashes. How can I achieve this with my JavaScript? JavaScript: jQuery(docum ...

Is there a way to halt the execution of code once a dialog box is opened?

Having an issue with my code: $("#lbCreer").click(function (e) { e.preventDefault(); $("input:checked").each(function () { var id = this.value; $("#hdId").val(id); $("#dialog-form").dialog("open"); // Stop the each ...

The conditional CSS file does not have precedence over the regular CSS file

Currently, my approach involves using conditional comments to connect to a CSS file named "IEonly.css" if the Internet Explorer version is not greater than 8. My goal is to modify certain properties in the standard CSS file. Oddly enough, IEonly.css effect ...

Concealing the print option while utilizing PDFObject in conjunction with PDF.js

When displaying a file using pdf.js, I encountered issues with the print button and other functionalities. I was able to hide the buttons using CSS for Chrome, but not for Internet Explorer, where I had to resort to using JavaScript. While the JavaScript ...

The secrets of enchanting jQuery CSS effects

https://css-tricks.com/examples/MagicLine/ That's the URL I am currently using. However, it relies on <script src='//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> There are other scripts that need <script ...

Obtain the chosen label from the selection dropdown

$scope.states = [ {"state_id":1,"state_code":"AN","state_name":"Andaman and Nicobar"}, {"state_id":2,"state_code":"AP","state_name":"Andhra Pradesh"}, {"state_id":3,"state_code":"AR","state_name":"Arunachal Pradesh\t"}, {"state_id":4,"state_code":"AS ...

Accessing location information using jQuery from Google's Geocoding API

Recently, I've been delving into the realm of Google Maps Geocoding and attempting to comprehend how to decipher the JSON data that it transmits back. This snippet showcases what Google's response looks like: { "results" : [ { ...

Is there a way to increment a counter with a click?

Seeking a method to create a counter that increments upon button click. Attempted code provided below, however the displayed value remains constant: $(document).ready(function () { $("#gonder").click(function() { var baslik = document.title; ...

What is the best way to incorporate dynamic elements into a canvas that evolve over time?

Whenever a user interacts with my website by clicking on various parts, I want to display an expanding circle. My idea is to achieve this using a canvas element. Currently, I have successfully implemented the feature where a circle is drawn at the position ...

TinyMCE: Tips for adding and highlighting text in your content!

Is there a way to insert, or even replace the current selection with some content and then have it automatically selected? Take for instance this text: Hello nice world! The user has selected nice. After clicking a button, this code is executed: editor. ...

Customize the format of the date in X-editable

I have implemented a X-editable date field using JS and HTML. However, when I select a date from the calendar popup, the value displayed in the input box is not following the format "mm/dd/yyyy" as specified. Instead, it shows "Wed Apr 13 2016 20:00:00 G ...