Need help with current page highlight

[chengxin708]

Hi I find out that Pro does not have option to setup indicator of current page. I want the current page look just like when I hover on it. Any solutions?
website: oldgeektech.com

[mldarshana]

Hi There @chengxin708

Thanks for writing in! Could you please try removing your custom CSS rules and test your issue further.

If you’re still having issues, disable your 3rd party plugins as well and re-test your issue further.

In case if you cannot isolate the issue, provide us with your WordPress login credentials in a secure note to check your issue further.

Thanks!

[chengxin708]

Just send you the secure note. Can you please help. Thanks

What I want to achieve is:
The top menu, I want when I am on page: Home, the home button should have a highlight just like when I hover on Home button.
I have found everywhere, do know how to do it. Please help. Thanks.

[ruenel]

Hello @chengxin708,

Did you just updated the theme? I think you might have because while I am at it, as I have checked the pages, there is now the highlight which is already included in the latest updates.

If you need anything else we can help you with, please let us know.

[chengxin708]

yes thanks for your help. I have one last thing missing. I updated the global js and I find out there is a bug. When I open up the page, the menu did show highlight, but when I hover on it and once the mouse point away, the highlight will disappear. This is really bad.

[rad]

Hi @chengxin708,

Please remove the custom javascript that you have

(function($){
    $(document).ready(function(){
        $('.menu-item').each(function(){
            if ( $(this).hasClass('current-menu-item') || $(this).hasClass('current-page-item') || $(this).hasClass('current-menu-parent') ) {
                $(this).find('.x-anchor-menu-item').addClass('x-interactive');
                $(this).find('.x-anchor-particle-primary').addClass('x-active');
            }
        });
    });
})(jQuery);

Then update your theme again to 2.4.1, it works on that latest version.

Thanks!

[chengxin708]

where is IT？
I did as you said remove the js and update to 2.4.1 still cannot find where I can set that up

[ruenel]

Hello @chengxin708,

Sorry that was not totally fixed. Maybe during my testing it was your jQuery that is working. I resolved your issue by removing your custom JS and applied this custom css instead:

.site .x-menu > li.current-menu-item > .x-anchor .x-anchor-particle-primary,
.site .x-menu > li.current-menu-parent > .x-anchor .x-anchor-particle-primary {
    width: 100%;
    height: 5px;
    color: rgb(232,47,58);
    transform-origin: 50% 100%;
    transform: scale3d(1, 1, 1);
    opacity: 1;
}

Please check your site now.