?
Solved

WordPress Menu Not Working

Posted on 2014-04-03
14
Medium Priority
?
706 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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 2000 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

Technology Partners: 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!

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
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 purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses

770 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