Sub menu not showing on hover or click

Support
#9

Hi @christian_y
This actually removed the lower grey line but it also removed the grey line between the two cells.

I wish to only remove the grey line thats on the bottom and not the one between the grey cells.

Thanks

#10

Hey @nourmoubayed,

Try replacing the code with this.

.x-navbar .desktop .sub-menu li:after {
    background-color: transparent !important;
}

Thanks.

#11

Superb ! Thanks @christian_y

#12

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#13

One last issue is occuring on tablets with this solution.

When someone Opens the submenu on a tablet, they cant close it.

Is it possible to automatically dismiss the submenu when the user presses or presses anywhere on the screen?

Same thing as this demo: http://demo.theme.co/church/

Thanks in advance.

#14

Hi there,

The solution that’s provided is based on CSS, and touch devices don’t have any hover or hover out functionality. It’s possible by attaching events/listener to all elements but that’s going to be glitchy and will freeze your site. And once you made it work, note that other scripts can’t stop event propagation too which will cause another set of issues. You can do that but you may need a developer as it requires dedicated time to fully implement it.

It’s the same reason why mobile menu uses toggles instead of hover in/hover out events.

Thanks!

#15

Thanks @Rad
I see this solution implemented on many Theme X demos.
Here’s one of them:
http://demo.theme.co/church/

How is it working there properly ?

And how can i replicate the same thing?

Thanks

#16

Hi again,

I tried to check your site but it’s not displaying correctly on my end and i am unable to test the menu at the moment, it looks like this is happening due to the autoptimize plugin, please clear all cache and see if this works.

Let us know how this goes!

#17

Hi @Nabeel
Sorry about that, i was migrating to staging. Please use the link ive attached.

Looking forward for a fix !

Thanks in advance.

#18

Hi there,

I checked the website and the menu does go away when you tap to other section of the site. It has few milliseconds delay to do that.

As my colleague informed it is not possible to give any other solutions other than the default one as it will need a huge amount of customization which is outside of our support scope.

Thank you.

#19

Hi @christopher.amirian
Thanks for your reply.

As I mentioned earlier, this issue is happening on tablets only.

It does go away on Desktop after few seconds, but on tablets it won’t and theres no way to dismiss it.

This same thing applies to the demo theme i am using: http://demo.theme.co/renew-4/
And the functionality of sub menus on tablets works perfectly there.

So i need the same functionality work on my site too please.

Looking forward for a solution.

Thanks

#20

Hi again,

To fix your issue, please add the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('body').on('touchend', function(e) {
		$('.menu-item-has-children').each(function(){
			if($(this).hasClass('x-active')) {
				$(this).removeClass('x-active');
			}
		});
	});
});

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

#21

Hi @Nabeel,

Thanks a lot for this piece of code. Its exactly what i’m looking for.

I tried it and it worked great the first time I open the sub menu and dismiss it on my Tablet.

After that, trying to open the submenu wouldn’t work. It just wouldnt open.

Looking forward for a solution for this.

Thanks again.

#22

You’re welcome.

#23

@christian_y
Please read my previous message.

Thanks

#24

Hi again,

The above solution will close the submenu only when you click somewhere else in the body, however if you need to close the menu by clicking on menu item itself then you can use this code:

jQuery(document).ready(function($){
	$('.menu-item-has-children').on('touchend', function(e) {
		if($(this).hasClass('x-active')) {
			$(this).removeClass('x-active');
		}
		else {
			$(this).addClass('x-active');
		}
	});
});

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

#25

Hi again @Nabeel

Thanks for your reply but again, this is not what I asked.
Im not sure what is happening, but Ive been getting random responses not related to questions Im asking.

let me clarify again:

The solution you provided me has a BUG. It does not work properly.

Here’s how to replicate the bug:
When I open the sub menu, and then close it, and then try to reopen it AGAIN, it will not open again (tablet only)

Please try this yourself:
Open the sub menu, close the submenu, then try to open the sub menu again. It will not work.

Looking forward for a solution.

Thanks in advance

#26

Hi there,

Then what you’re currently referring is the desktop menu. You don’t need any fixes or CSS for that case since your menu should work like that. Tapping outside will serve as mouse-hover-out, I thought you’re referring to the mobile menu which can be open only by toggling its sub-menu. Try removing those CSS and Javascript and test it again, open a sub-menu and click on the menu and it will close. Else, please provide a video recording again without these fixes.

Thanks!

#27

Hi @Rad

Yes, I am reffering to the desktop menu when used on Tablet touch screen.

If I remove the code, the submenu will never close. (check video attached that shows behaviour without the code)

The Code provided above allows me to close the submenu when i scroll or press on the menu button. BUT it will not allow me to open the submenu again. It just allows me to open it once. Which is a problem.

Please i need a fix for that.

Thanks

#28

Hello There,

Could you please disable Optimize Press plugin? It might be causing this issue because we have tested the theme in different browsers and on the tablet and we could not replicate the issue. This could be caused by a 3rd party plugin. 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.

If the issue still exist, please re install X theme and Cornerstone. There might be some files that were corrupted. You can review our update guide and see the Manual Update section to re install X.

Please let us know how it goes.