Changing current_page_item CSS class seem not to have any effect (even with !important)

enter image description here

Changing current_page_item CSS class seem not to have any effect (even with !important):

I managed to overcome this with external CSS and JavaScript:

CSS:

.active {color: #d3b258 !important}

JS:

const currentPage = location.href;
const allA = document.querySelectorAll('a');
const aLen = allA.length

for (let i = 0; i < aLen; i++) {
  if ( allA[i].href === currentPage ) {
    allA[i].className = "active";
  }
}

My question

Why did my original approach (that doesn’t involve creation custom CSS and JS) didn’t work? I mean, why did the native CSS class that is created by WordPress didn’t produce any effect?

In other words, why is the current_page_item CSS class by WordPress doesn’t get the red color given to the class, hence the curren page menu link doesn’t become red?

Read more here:: Changing current_page_item CSS class seem not to have any effect (even with !important)

Leave a Reply

Your email address will not be published. Required fields are marked *