Sub menu not showing on hover or click

Support
#1

Dear support,
I just added a subitems to my menu but i cant get them to show.
When i hover over the menu item it doesnt show me the sub items inside it.

Im using Renew. Thanks in advance.

#2

Hi There,

Please find and remove this custom CSS under style.css file:

body .x-navbar, .touchevents .x-navbar {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

Hope it helps :slight_smile:

#3

Thats awesome @thai
Works great.
One more thing please.
I tweaked the CSS of my Submenu and it looks great now, but i need to remove the Upper grey bar and lower grey bar that shows on the submenu. I just want to leave the grey line between the cells but not the top and the bottom.
Is there a way to do that please?

Thanks

#4

Hi there,

I went to check your site but the menu does not seem to look like the screenshot you sent anymore.

Do you still aim to accomplish what you asked previously?

#5

@Jade
It still is actually. If you scroll down, or go to any other page, you’ll see that the upper and lower grey lines are still there!

Its just that they’re not very visible when you are at the TOP of the home page because the menu bar is invisible.

Thanks

#6

Oppps, sorry for missing that.

Please try this code:

.x-navbar .desktop .sub-menu li:first-child:before, 
.x-navbar .desktop .sub-menu li:first-child:after {
    display: none;
}

Hope this helps.

#7

Hi Jade,

Thanks for the solution.
This partially worked.
it removed the grey line from the TOP but not from the bottom.

Thanks

#8

Please add this code.

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

Thanks.

#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!