Active menu invisible - take 2

[flacnvinyl]

This thread was closed but the solution provided did not actually solve the problem: https://theme.co/apex/forum/t/active-menu-item-invisible/47230

I am providing a secure note with a walkthrough. You suggested we change the interaction on hover, but that does it for the background. We have a particle effect with edges that looks great. I am asking why/how we can make the particle effect be active, when a menu item is active. See private note

[ruenel]

Hello @flacnvinyl,

Thanks for updating in!

To resolve this issue, please edit your custom header and insert this in the header custom css area:

.site .x-menu > li.current_page_item > .x-anchor.x-always-active .x-anchor-particle-primary,
.site .x-menu > li.current-menu-parent > .x-anchor.x-always-active .x-anchor-particle-primary {
    width: 100%;
    height: 100%;
    border-radius: 15%;
    color: #ec0530;
    transform: translate3d(-50%,-50%,0) scale3d(1,1,1) !important;

    opacity: 1;
    transition-delay: 0s;
    transition-duration: 0s,0.3s;
}

We would loved to know if this has work for you. Thank you.

[flacnvinyl]

Excellent! Could this feature be added to the roadmap for Pro?

[ruenel]

Hey @flacnvinyl,

There is already a feature request on this and our developers is already made aware of it.

Best Regards.