Multiple Custom Contents in Ubermenu

Hi,

If I want to place multiple custom contents (such as Google Maps or a layerslider) in a Ubermenu, only the first one shows, but the rest does not show. I do not know if this is an Ubermenu problem or a theme problem.
If you go to https://ceramicfx.com and hover over “Contacts”, you will see that, out of two maps (Garland and Plano), only the first map (Garland) is active. This is not a shortcode problem. If I swap the menu items; Plano start working and Garland becomes inactive.
Also, in the same page. if you go to “Prices”, the layerslider that I embedded under “Ceramic Coating” is working, but the one that I embedded under “Paint Correction” is not working.

Any help would be greatly appreciated.

Thank you!

Hi Gunes,

Can we do a general troubleshooting first?

Can you confirm that you are fully updated? (Theme and Plugins)

You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

If the issue persists, please, you could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing 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.

I have tried it on my setup and 2 shortcode on the same menu is showing. Although, we might need to follow how you have setup the menu to make sure if the issue exists on a specific menu settings only. If the issue persists after you make sure all is updated and it’s a plugin conflict, please share site credentials inside a secure note. Thank you

Hi Levy,
Thank you for your quick response.
I use the updated versions of WP, Pro and Ubermenu.
I use very few 3rd party extension and I installed them recently. I had this problem before I installed those extensions (Forminator).
You can find my log in details in the secure note.
Thanks for your help.
Gunes

Hi Gunes,

Thanks for reaching out.

Both maps and slider are dependent to the container’s dimension that’s why it always visible on the first visible container, which it has defined dimension. It has similar effect if you place them in tabs and accordions, like if you place them on the second tab or accordion and they aren’t going to be displayed correctly.

Try resizing your browser while it’s visible and it will work since there is now a valid dimension and browser resize re-triggers the render functions ( Or just by dragging the map center ).

Unfortunately, the dimension is controlled by Ubermenu, overriding it with CSS only makes it worst. I’ll continue checking what else can be done, the javascript that works for accordion and tabs aren’t working on this setup either

jQuery( function($) {

$('.ubermenu-has-submenu-drop ').on('mouseover', function() {

$(window).resize();

} );

} );

Thanks.

Rad, thanks for your reply, I will be waiting your solution, if you find one. If it works, it will be really awesome.
Thanks again!

Hi Gunes,

Please check all your custom HTML markup, on the first and second tab, something broke your shortcode on the second map.


Try wrapping your shortcodes in a <div> tag.

e.g.

<div class="custom-content">shortcode here</div>

Hope it helps,
Cheers!

Hi Friech,
You were right, there was a mistake on the shortcode. I fixed that. But I could not still find a solution to the main problem. The second custom content (whether a map or a slider) does not display correctly. I do not know if I wrapped the content correctly but it seem it does not save the problem.
Thanks
Gunes

Hi Gunes,

Since, it is not working on that setting, the alternative at the moment is change current setup of the menu. Instead of hiding the Custom Content onload and just make it available on hover, please try to change the setting to be visible right away. On custom content shortcode where it needs JS and fixed container width to be available, please avoid a flyout setup for submenu.

Hello Gunes,

Your post has been withdrawn. Is your issue resolved already?

Please be informed that it is not wise to insert a slider in one of the menu items. Sliders needs to initialize on page load so that the slides will be properly displayed. It may not work correctly when the page load and it’s container is not visible because it will become invisible during the loading of the page. Thus, it cannot initialize the slider to work.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.