Drop-down menus not working in WordPress

[Arnold]

Hi,

I am attempting to get your marvelous menu working in WordPress but I am stumped as to why anything below the top level menu is not showing.

I have added the following to my functions.php file:

wp_enqueue_style( 'amiable-sm-core', get_template_directory_uri(). '/css/sm-core-css.css' );
	wp_enqueue_style( 'amiable-sm-blue', get_template_directory_uri(). '/css/sm-blue/sm-blue.css' );
	wp_enqueue_script( 'amiable-smart-menus', get_template_directory_uri() . '/libs/jquery.smartmenus.js', array('jquery'), '20130115', false );

I have also added the following to my normal stylesheet:

@media (min-width: 768px) {
	#main-menu {
		position: relative;
		z-index: 9999;
		width: auto;
	}
	#main-menu ul {
		width: 12em; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
	}
}

I have the following wp_page_nav call in the file header.php:

<nav id="site-navigation" class="main-navigation" role="navigation">
						<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'main-menu', 'menu_class' => 'sm sm-blue' ) ); ?>
					</nav>

There is no styling for #site-navigation or .main-navigation in my stylesheet.

The wp_page_nav call returns the following output:

<div class="menu-primary_menu-container"><ul id="main-menu" class="sm sm-blue"><li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-6"><a href="http://localhost/">Home</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-has-children menu-item-7"><a href="http://localhost/sample-page/">Sample Page</a>
<ul class="sub-menu">
	<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"><a href="http://localhost/test/">Test</a></li>
</ul>
</li>
</ul></div>					</nav>

Lastly I have included the following code in one of my other JS files called by my theme:

$(function() {
	$('#main-menu').smartmenus({
		mainMenuSubOffsetX: -1,
		subMenusSubOffsetX: 10,
		subMenusSubOffsetY: 0
	});
});

The menu displays the top-level items but the single second level item I have included is not shown. Unfortunately I cannot provide a link to my site as this code is running on my local test site.

Any assistance will be greatly appreciated.

[admin]

Hmm, on theory everything looks fine. If the sub menu is not working and the sub menu indicator arrow is not appearing, then it’s some kind of script initialization problem. Here’s what you could check:

1) Make sure the script files are loaded correctly (double check the path) – the jQuery .js file and jquery.smartmenus.js. You can test if the SmartMenus plugin is loaded correctly with the browser console (in Chrome: hamburger icon -> More tools -> JavaScript Console; in Firefox: hamburger icon -> Developer -> Web Console) – type the following and hit Enter:

$.SmartMenus

If you get undefined, then the “jquery.smartmenus.js” file is not loaded correctly (check its path).

2) If for some reason jQuery is used in noConflict mode, then you may need to change your init code like this:

jQuery(function() {
	jQuery('#main-menu').smartmenus({
		mainMenuSubOffsetX: -1,
		subMenusSubOffsetX: 10,
		subMenusSubOffsetY: 0
	});
});

Hope this helps. Please let me know if you still have troubles.

[Arnold]

Your last piece of advice did the trick, thanks so much. Looking forward to reading the latest news on the menu in your newsletter.

[Author]

Posts