Can a dropdown content/menu in Pro Headers start open?

[501creative]

Client want a “Quick Links” menu/modal that starts open when the site loads. Looks like either a Content Area Dropdown or Navigation Dropdown would work for this. Is there a way to make them display by default when the site first loads?

Thank you.

[jade]

Hi there,

Yes, that is possible. You can do that by adding an ID to the element then through some Javascript code like this:

jQuery('#trigger-me-anchor-toggle').trigger('click');

Hope this helps.

[501creative]

Thanks fir the response. Seems like it should work, but the dropdown remains closed. Verified the js file is loading through an alert. Noticed a bit of delay on the alert coming up though.

Verified ID is on the element:

<a class="e2052-9 x-anchor x-anchor-toggle" tabindex="0" id="quick-links-anchor-toggle" data-x-toggle="1" data-x-toggleable="e2052-9" aria-controls="quick-links-dropdown" aria-expanded="false" aria-haspopup="true" aria-label="Toggle Dropdown Content"> <span class="x-anchor-content"> <span class="x-anchor-text"><span class="x-anchor-text-primary">Quick Links</span></span> </span> </a>

Also tried
jQuery(document).ready(function($) { $( '#quick-links-anchor-toggle' ).trigger( 'click' ); });

[nabeel]

Hi again,

I checked your page and I could not find the JS anywhere on the page. When i run the script via chrome’s developers tool, it works as expected. Try adding the JS either in the Theme Options > JS or in the JS section of your page in Pro editor (see screenshot)

jQuery(document).ready(function($) {
$( '#quick-links-anchor-toggle' ).trigger( 'click' );
});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[501creative]

Thanks for looking at this. Adding the code directly to the page worked. If I wanted this to work on all pages is there a place to add the code? I had thought there was a custom JS in Pro - Theme Options, but don’t see it.

I was using an external JS file. Placing the code there didn’t seem to work. Testing that the file active by having it display an alert. Can you think of any reason why this might not have worked implementing it that way? My only guess is that page was loading after the file so was not present to receive the click.

[Prasant]

Hello @501creative,

Thanks for updating the thread.

I checked my local setup and I can see JS option in Theme Options panel which is running latest version of WordPress and X and Pro Theme. Can you please share the login details in secure note, I would like to take a look why JS panel is not showing up in Theme Options panel. In the meantime, please try out following solutions:

1. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
2. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
3. Increase the PHP Memory Limit of your server. Click here for more detailed information and how to increase the PHP memory limit.

Thanks.

[501creative]

My mistake! I can see the global JS in the theme options. I totally overlooked the leftmost sidebar and was looking at the main options.

Thanks!

[jade]

Glad to hear it’s sorted.

[inhabitcreatively]

Would this be the same for a dropdown menu? I’m trying to get the ABOUT dropdown to display by default on the home page. http://cimpl.studio/gms-landing/

Thanks

[rad]

Hi @inhabitcreatively,

Similarly, yes. And since you already add the ID to the menu item, then please add this javascript instead of the above one.

jQuery(document).ready(function($) {
$( '#trigger-me.x-menu > li:first-child > a' ).addClass('x-interactive x-active');
$( '#trigger-me.x-menu > li:first-child > ul' ).addClass('x-active');
});

Thanks!

[inhabitcreatively]

Thanks for the prompt response, that worked beautifully. One last question and it may be beyond the scope here but I’m hoping it’s inline with where we are on this thread. If no other sub menu or dropdown is visible / active, would it be possible to have the first-child > ul active by default?

Thanks again.

[inhabitcreatively]

Scratch that. After playing around a bit more it seems that is what is already happening. The only way to hide the submenu displayed by default is by hovering the selected trigger itself. I think we’re all good here. It would be ideal if the menu displayed by default disappears when another dropdown is activated and returns to it’s active state if no other dropdown is active. But that sounds a bit extensive. Appreciate the help!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.