Solved

WordPress Menu Not Working

Posted on 2014-04-03
14
682 Views
Last Modified: 2014-04-05
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
Comment
Question by:domgarofalo
  • 7
  • 4
  • 3
14 Comments
 
LVL 10

Expert Comment

by:jtwcs
ID: 39976413
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
 

Author Comment

by:domgarofalo
ID: 39976466
I just fixed the links so they go to the correct files.
0
 
LVL 10

Expert Comment

by:jtwcs
ID: 39976725
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:domgarofalo
ID: 39976745
How do I assign those classes to the sub-menu?
0
 

Author Comment

by:domgarofalo
ID: 39976774
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
 

Author Comment

by:domgarofalo
ID: 39976802
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
 
LVL 15

Expert Comment

by:eemit
ID: 39976889
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
 

Author Comment

by:domgarofalo
ID: 39977042
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
 
LVL 10

Expert Comment

by:jtwcs
ID: 39977198
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
 
LVL 15

Expert Comment

by:eemit
ID: 39977815
- 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
 

Author Comment

by:domgarofalo
ID: 39979039
How do I assign the classes to the sub-menu ul?
0
 
LVL 10

Accepted Solution

by:
jtwcs earned 500 total points
ID: 39979175
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
 
LVL 15

Expert Comment

by:eemit
ID: 39979891
>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
 

Author Closing Comment

by:domgarofalo
ID: 39980607
Worked perfectly! Thank you.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Embedding Tags in a restricted UI 6 36
tiled banner 2 13
Can't get cursor to change 3 16
responsive menu pushes content down instead of going over top 3 17
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Find out what you should include to make the best professional email signature for your organization.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question