Solved

WordPress Menu Not Working

Posted on 2014-04-03
14
676 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

828 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