Good day,
Loving the new Pro Header and Footer Builders. Just one question for now. Is it possible, to have the rollover effect applied to the current active page in the header? For example, say I’m on the homepage, the link “Home” in my header would have a separate effect from the passive links to show that it’s the current active page.
The website is www.BaywalkSLU.com.
Thanks,
Hi @BaywalkSLU,
Thanks for writing in.
Not sure what are you trying to achieve. Would you mind sharing us more details.
I am not sure this would help. However, as what I have understand, this is an effect of one page navigation.
You can follow the link below for one page navigation guide.
Let us know how it goes.
Thanks.
Hi,
Sorry about the confusion. Forgot to add screenshots from the back-end.
So, in further detail, this is what my navigation menu looks like right now in the Pro Builder:
And this is what I’d like it to look like:
So, in this particular example, the “Home” button/link on the navigation bar currently does not have a separate effect applied to it when I’m on the homepage. What I’d like, is for the link in the navigation bar which corresponds with the current active page the user is on, to be of a different style.
Hi There,
This is actually a feature that has been submitted on our Dev Team and looking a way to implement this. Regretfully we can not provide an ETA on when this feature will be implemented.
For now you can try adding the custom JS below on Theme Options > JS
setInterval ( function(){
jQuery('.current-menu-item a').addClass('x-active');
jQuery('.current-menu-item a .x-particle').addClass('x-active');
}, 500 );
This should provide your active menu the same style as the hovered.
Cheers!
That actually worked perfectly. Many thanks!
You’re always welcome!
Cheers.
When I use this JS all submenu items become active when the parent is active. And when a submenu item is selected it become active but the parent will not. Can you please help me with this? Thank you in advance!
Hi,
To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.
Thank you.
Hi,
I have added a URL as a secure note. Thank you!
Hi there,
Please try this on
setInterval ( function(){
jQuery('.current-menu-item > a').addClass('x-active');
jQuery('.current-menu-item > a .x-particle').addClass('x-active');
}, 500 );
Thanks!
Super! That worked when visiting the parent page. Though when visiting the subpage the parent doesn’t get active. Please have a look at the attached URL. Thank you!
Hi There,
By default that is how it works but you can update this to achieve that:
setInterval ( function(){
jQuery('.current-menu-item a').addClass('x-active');
jQuery('.current-menu-item a .x-particle').addClass('x-active');
jQuery('.current-page-parent a').addClass('x-active');
}, 500 );
Hope this helps.
Hi,
I did try that myself but the problem is that the subpage in the menu becomes active when visiting a parent. Tricky problem 
Any ideas?
Thank you!
Hi there,
Please try this one,
setInterval ( function(){
jQuery('.current-menu-item > a').addClass('x-active');
jQuery('.current-menu-item > a .x-particle').addClass('x-active');
jQuery('.current-page-parent > a, .current-menu-parent > a').addClass('x-active');
}, 500 );
Thanks!
This works perfectly! Thank you very much!
On behalf of my colleague, you’re welcome. Cheers!
Hi there,
I’m using Pro. I would like to have the line under the link (The Particle) on the header to stay on when the page is active “a:active”
This is how it looks now:
This is what I’m looking for:
Any idea how to do that?
Thanks for our help!
Hello Luis,
To get your issue resolved, please follow the code given by @Rad in the previous response. Please add the JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)
setInterval ( function(){
jQuery('.current-menu-item > a').addClass('x-active');
jQuery('.current-menu-item > a .x-particle').addClass('x-active');
jQuery('.current-page-parent > a, .current-menu-parent > a').addClass('x-active');
}, 500 );
We would love to know if this has worked for you. Thank you.
We are delighted to assist you with this.
Cheers!