I m new to wordpress and using floating menu plugin to float some links (links to same page).. It is working fine anyways but there is no option to highlight the active link.. is there anyway to change active link's color or icon's icon..
my purpose is just to highlight the active item (by any possible way - background color change or link color change or icon color change even if text size change is fine )
link to the website in i working on Website
I have tried this with help of mozilla inspect tool.. tried many css solution available on stack overflow and others but no luck. Still could not find how to make current item active.. any help will be appreciated,
You can add an event listener to each link in your floating menu that toggles a class on click. This will allow you to persist the active state across clicks.
document.addEventListener('DOMContentLoaded', function () {
const menuItems = document.querySelectorAll('.element-to-highlight a');
menuItems.forEach(item => {
item.addEventListener('click', function () {
// Remove the 'active' class from all items
menuItems.forEach(link => link.classList.remove('active'));
// Add the 'active' class to the clicked item
this.classList.add('active');
});
});
});
Then write the CSS to highlight the link when it's active, for example:
.element-to-highlight a.active {
color: red;
background-color: yellow;
}