[sufsParticipant]

How do I slow down the speed of the drop down menu to make it appear more animated?

I am using the Renew stack.

[sufsParticipant]

This reply has been marked as private.

[John EzraMember]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-nav-wrap.mobile.collapsing {
       transition: heght 0.5s ease;
 }

Note: you can change the duration 0.5s to wha ever you want.

Hope this helps – thanks!

[sufsParticipant]

What about for the menu when it’s not the mobile one?

[Paul RModerator]

Hi,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[sufsParticipant]

It’s the same question as this one: https://community.theme.co//forums/topic/submenu-animation-speed/

I’m looking for a way to make the sub-menu drop down more slowly when the nav item is hovered over.

[Nabeel AModerator]

Hi again,

To slow down the drop down speed you can use the following jQuery script, just add the following jQuery script in your Customizer via Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
	$(".menu-item-has-children").hover(function(){
		$(this).children( "ul.sub-menu" ).show(2000);
	}, function(){
		$(this).children( "ul.sub-menu" ).hide("fast");
	});
});

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

[sufsParticipant]

Perfect! That’s exactly what I needed.

Thank you!

[ThaiModerator]

You’re most welcome 🙂

[tlauenParticipant]

I’m sorry for bursting into this thread, but right now the menu “appears” from the top left corner. Is it possible for it to “fall down” from where the menu item is located?

[Rue NelModerator]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[doughballsParticipant]

Hi there. I also offer my apologies for butting in, but I’ve been trawling the forums trying to find a way to animate the sub menu, so that it falls down slowly as opposed to just appearing when you hover over. The above jquery code kind of gets me what I want, but it’s behaving really erratically to the point where it’s unusable. Here is my site with the jquery in action:

http://www.seandoherty.co.uk/mcswp

1. If you leave the mouse in a certain position, just under ‘services’ or ‘projects’, the menu grows and shrinks, on a loop. Why is this? And can it be fixed?

2. If you move quickly between ‘services’ and ‘projects’, it triggers both menus at once, which looks really unsightly. Can this be fixed? I think maybe the link area is too wide. It should literally just be the text – not the space either side of it – that triggers the drop down.

3. Sometimes the sub-menu disappears as you scroll down the options on it. Again, can this be fixed?

It might be that there is a simpler way to achieve a gradual drop down menu, rather than using jquery, but I can’t seem to find any info on it on here.

[RadModerator]

Hi there,

I checked but there is no sub menu on your provided site. Is it primary sub menu or custom sub menu? Would you mind providing a screen recording?

Thanks!

[doughballsParticipant]

Sorry, it could be my terminology that is incorrect. I assumed the primary menu is the list of items along the top (about us, services, projects, contact), and the sub menu are the items nested within services and projects? Is this not the case?

Anyway, as I stated above, when you hover over projects or services (the only menu items that have drop down menus) the drop down is behaving really erratically.

I have taken a screen recording but I’m only allowed to upload a max file size of 512kb…?

[RadModerator]

Hi there,

I re-checked and sub-menus are now displaying. Not sure what happened, but it’s not there on my last checked. And it’s fully working now, it’s dropping slow.

I’m not sure what issue should I look for, would you mind providing a screen recording? And what browser the issue happens?

Thanks!

[Author]

Posts