Docs

[Bent M]

Hi.

Thanks for helping many times.

I am using my second menu in a sidebar here: http://www.adventuresincaring.org/giving/

My question is, can I get a similar effect of hiding the sub-menu elements (the indented ones) as is done on my Main menu? On the sidebar I see all my pages listed at once, but in my Main Menu the indentend ones only show when moused over or clicked.

?

This way it would not be such a big menu

[Nabeel A]

Hi there,

Thanks for writing in! To achieve this, first add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.menu-item-has-children ul {
    display: none;
}

Then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$(".menu-item-has-children").hover(function(){
		$(this).children( "ul.sub-menu" ).show("fast");
	}, 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!

[Bent M]

Wow.
That was painless.
It works, looks great.
I am totally impressed.
Thank you so much.

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts