Active Top Menu Link in Pro

[iTurtle]

dear support,

i would like to have the top menu button stay active after selecting submenu items. not only on roll-over. i used particles to make a colored background. this background should just stay there to indicate where i am on the website.

i don’t see an option for that in the header builder. have i overlooked something?

special about my top menu buttons is, that they are not pages but individual links with a #. so they can’t be selected but should show active when a submenu button is selected.

is that possible at all?

this is not solving my problem:
.current-menu-item > a {
background-color: #fff !important;
}

thanks in advance for your help! best wishes, kai

[mldarshana]

Hi There,

Thanks for writing in! Could you please try adding the following JavaScript code into your Customizer, Custom > Edit Global JavaScript area.

setInterval ( function(){ 

jQuery('.current-menu-item a').addClass('x-active');
jQuery('.current-menu-item a .x-particle').addClass('x-active');

 }, 500 );

Hope that helps.

[iTurtle]

hi @mldarshana, thanks for your fast! reply
i am working with pro and was told not to use the customizer anymore.
so i added it in the custom js field of the theme options of cornerstone.
that made it appear in the customizer, too.
but. it does not work
any more ideas? thanks a million! kai

[Joao]

Hi There,

Please add the code to Pro > Theme Options > JS instead.

Let us know how it goes

[iTurtle]

also i have a new error pop-up in the header builder: it says:
uh oh! the preview html did not include a closing /html tag.

[nabeel]

Hi again,

For the error you’re seeing please refer to the following thread https://theme.co/apex/forum/t/the-preview-html-did-not-include-a-closing-html-message/14443/2

To highlight the parent menu, you can add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.current-menu-parent {
    background  : #0b485c !important;
}

Hope this helps!

[iTurtle]

hi @Nabeel!
thank you so much for the info about the funny error box.
and thank you so much more for the working css!!! i am more than happy!
i just have no idea why it works, because the background i am using is coming from the particles settings. or do they use the “normal” css background option for that?
well, anyways. thanks a million! kai

[nabeel]

Hey there,

Hmm not sure about the particles settings but I’m glad all worked out.

Cheers!

[iTurtle]

yes. me too
the css works only in combination with the js you gave me. is that intended?
thanks, kai

[lely]

Hello Kai,

Active status is not added yet on Pro. A feature request for this function was already added. The process should be, once active status was added, the interaction you have set for the menu on the builder should work as expected without adding custom CSS to manipulate how it works like adding background color or let say font color. Now, what you got is a temporary fixed while the feature is not yet in place.

[iTurtle]

hi lely,
thanks for your information! thats good news!
but i was wondering why the css only works properly when the javascript is also in place. i mean it works partially but not for the buttons without submenus. so i am just curious why that is so.
thanks again! kai

[christian]

That is because the script adds a class that is not there out of the box and the CSS only styles it. If the class doesn’t exist, the CSS is of no use. I recommend that you wait for the official feature.

Thanks.

[iTurtle]

thanks a lot christian! great explanation which i can understand and i am happy looking forward to the implementation one day

[Joao]

Thank you.