• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 738
  • Last Modified:

WordPress Menu Not Working

I have a menu for a WordPress theme that I created that is not displaying the child items correctly. Here is how I want the items to display:

http://domgarofalo.com/wellcity/

When you mouse over an item with an arrow, the dropdown should show the items.

Here is how it is currently showing.

http://domgarofalo.com/wellcity2/

The Checklist link should be part of a dropdown menu when the user mouses over Participants.

Any ideas?
0
domgarofalo
Asked:
domgarofalo
  • 7
  • 4
  • 3
1 Solution
 
jtwcsCommented:
The linked scripts at the bottom of the page on the second link are dead.  This is throwing off the layout and other functionality that rely on the scripts.  Do they exist in the wellcity2 folder?

<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/plugins.js"></script>
<script src="js/custom.js"></script>
<script type='text/javascript' src='http://localhost:8888/wordpress/wp-content/plugins/dropdown-menu-widget/scripts/hoverIntent.js'></script>

Open in new window

0
 
domgarofaloAuthor Commented:
I just fixed the links so they go to the correct files.
0
 
jtwcsCommented:
Yes, js files are live.

After taking a closer look at the markup, aside from the validation errors, it appears the menu class structure is not the same.

First page dropdown example:

<ul class="nav l_tinynav1" id="nav">
    <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Contributions <b class="caret"></b></a>

        <ul style="display: none;" class="dropdown-menu js-activated">
            <li><a href="listing.php">Listing of Contributors</a>
            </li>
            <!--.dropdown-->
        </ul>
    </li>

Open in new window

The second page dropdown does not have any of the same classes.

<ul class="nav l_tinynav1" id="nav">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-9" id="menu-item-9"><a href="http://domgarofalo.com/wellcity2/?page_id=6">Participants</a>

        <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12" id="menu-item-12"><a href="http://domgarofalo.com/wellcity2/?page_id=10">Checklist</a>
            </li>
        </ul>
    </li>

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
domgarofaloAuthor Commented:
How do I assign those classes to the sub-menu?
0
 
domgarofaloAuthor Commented:
I found out how to assign through WordPress and I have hidden the 'Checklist' link under Participants. Now I just need to figure out how to reveal 'Checklist' after the mouseover.
0
 
domgarofaloAuthor Commented:
I need to add a class to the a tags and li tags for the sub-menus. Is there a way to do that?
0
 
eemitCommented:
Check in your functions.php if you have the line:
add_filter( 'wp_nav_menu_objects',....
The callback function of this filter is used to add a class to a menu item if it has submenus.
In first case you have for parent menu item: class="dropdown"
In second case you have: only default class "menu-item-has-children"
0
 
domgarofaloAuthor Commented:
Okay, I am a step closer now. I added what you suggested to functions.php. My functions.php file is very minimal. I can mouse over the link and the sub-menu shows. Now I just have to get the sub-menu to style like the rest.

When you're on the home page and mouse over the Participant link the sub-menu will not appear. Only when you're on the Participants page. UGh.
0
 
jtwcsCommented:
The dropdown is working for me but the classes are on the wrong element so it's not applying the styles correctly.

The classes (dropdown-menu and js-activated) need to be applied to the sub-menu <ul>.  They are currently being applied to the child <li>.

<ul class="dropdown-menu js-activated sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12" id="menu-item-12"><a href="http://domgarofalo.com/wellcity2/?page_id=10">Checklist</a></li>
</ul>

Open in new window

0
 
eemitCommented:
- Check also your header.php
You have two times the line:
<div class="row-nav navbar">

- You should check in your functions.php of your parent theme if you have the line:
add_filter( 'wp_nav_menu_objects',....
Then you can insert the similar to your child theme
0
 
domgarofaloAuthor Commented:
How do I assign the classes to the sub-menu ul?
0
 
jtwcsCommented:
You can add them in with jQuery.  Update the custom.js file menu section to the following.  Also, remove the classes being added to the <li>.

//////----MENU---////////
jQuery(document).ready(function ($) {
$('#nav ul.sub-menu').addClass('dropdown-menu js-activated');

$('.navbar .dropdown').hover(function() {
	$(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
	var na = $(this)
	na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
	$(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
	var na = $(this)
	na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

});

Open in new window

0
 
eemitCommented:
>How do I assign the classes to the sub-menu ul?
Check how it is done in your parent theme.
- Check in your parent theme's functions.php if something like this is used:
class Some_class_name extends Walker_Nav_Menu {
- Or search for a separate something-menu-walker.php file in your parent theme.
Namely, you need to create your own walker class.

Then in header.php of your parent theme in wp_nav_menu call, you should see something like:
'walker' => new Some_class_name(),
0
 
domgarofaloAuthor Commented:
Worked perfectly! Thank you.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 7
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now