Solved

WordPress Menu Not Working

Posted on 2014-04-03
14
695 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

691 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