menu highlighted after clicked

Question

Im in need of a little help. when the user goes onto the application page for example. the icon needs to stay lit up. in the image my cursor is hovered over it to give the efffect. anyone know if what i want to achieve is possible.

<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>

Check out this thread to figure out how to add a class to your menu item: http://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu — duvigneau, Jan 10 '17 at 16:11

score 1 · Answer 1 · answered Jan 10 '17 at 16:06

1

suppose your style is color:white

you need to give class on the icon corresponding to active page

and then do

.activeTab {
  color: white;
}

answered Jan 10 '17 at 16:06

ashish singh

6,526
2
15
35

menu highlighted after clicked

1 Answers1