X theme drop down menu not displaying on mobile

Support
#1

Hi,

I am using the x theme nav on my website. It’s working fine on desktops, but the drop down submenu is not showing on mobiles.
I tried adding different additional CSS, but nothing worked.
Can you help me out?
Thanks!

Best,
Yitao

#2

Hello @7rui,

Thanks for asking. :slight_smile:

Can you please share website URL for us to take closer look?

Thanks.

#3

Hello,

Thanks for your reply.
Following is the website.
http://visa.lab.asu.edu/gears/
I guess there is something wrong with the drop down sub-menu. It’s acting strangely on mobile.

#4

Hello There,

Thanks for providing the url of your site. It appears that you are using an older version of X(4.4.2) and Cornerstone (2.0.6). Please be advised that we have released X 5.2.3 and Cornerstone 2.1.4. It is now available in automatic updates. You can now update to this latest version. This latest release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/).

After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

#5

I updated both the Cornerstone and the X theme to the latest version. And cleared all caches.
But the drop-down menus are still not working properly on mobile.
Can you please take a look into that again?
Thanks.

#6

Hello,

Any help will be appreciated!

#7

Hi,

Can you try removing this in your Global JS in the Customizer

$(".x-icon-angle-double-down").click(function(){$(this).toggleClass({"collaps"})})

If that doesn’t help, kindly provide us your Wordpress admin login in Secure Note

Thanks

#8

Hi,

I provided the Wordpress admin login in Secure Note.

#9

Hi again,

Thank you for providing the credentials. To fix the issue first add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery( function($) {
	$(document).ready( function(){
		setTimeout( function() {
			$('.x-sub-toggle').each( function() {
				$(this).insertAfter( $(this).parent() );
			});
		},500);
	});
});

Then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-sub-toggle {
    z-index: 9999 !important;
}
li.menu-item-has-children {
    position: relative !important;
}
.x-sub-toggle>span {
    top: 13px !important;
    margin-top: 0px !important;
}

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

1 Like
#10

It works perfectly! Thanks for the help.

#11

Glad we could help.

Cheers!

#12

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