Javascript seems to have stopped working for navigation and tabbed section on Page.

I can't figure out why my top left Account Menu javascript has stopped working. It's supposed to be a dropdown on hover. Arghhh!
It's also not working for the tabbed section under the lesson description. It's as if I've turned off or trashed a file, but can't figure out what it was.

Anyone see what I did the fudge it up?

http://sandbox.intrepidrealist.com/cazoozsb/lessons/beginner-ukulele-strumming/
LVL 9
Alicia St RoseOwner & Principle Developer/DesignerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Lucas BishopClick TrackerCommented:
It looks like "zozotabs" is erroring in the console.

Did you potentially delete a link to:
http://sandbox.intrepidrealist.com/cazoozsb/wp-content/themes/cazooz/js/zozo.tabs.min.js
0
Leonidas DosasCommented:
This is the error  that you have.If i set the
console.log($);

Open in new window

to see If the jquery library is exists the I have an udefined return..
Capture.JPGThe installation as the documentation says must be as the image below:
Capture.JPGSet up the link and the scripts with this series
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Checking for '$' is not conclusive as most WP sites use noConflict
jQuery('body').hide()

Open in new window

Hides the code so jQuery is fine - the error is referring to a library that is not found.

In the code in question the document ready is passed jQuery as a paramter $ so use of $ within the function is fine

It might be the ZoZo JS file but I doubt it is affecting the menu for the following reasons
a) The error only appears on that page - not any of the other pages
b) The library is associated with Tabs - this is an issue concerning the menu
It will affect the tabbed-nav section under the lesson description - the links there should be tabs and to fix those would require including the ZoZo Tabs JS file as recommended by Lucas.

I can't see anything definitive on the menu though that would indicate what was being used to control the menu. Can you give us any information on how that menu was originally created?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Hi Julian,
It's the native WordPress Menu. So, I feel something is conflicting with it. I just created two different menus and I've placed then in my header.php file.

Here's my header.php code:

<?php
/**
 * The header for our theme.
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Cazooz
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'cazooz' ); ?></a>

	<header id="masthead" class="site-header" role="banner">
		<div class="header-wrapper">
			<div class="site-branding">
				<?php
				if ( is_front_page() && is_home() ) : ?>
					<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
				<?php else : ?>
					<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
				<?php
				endif;
				?>
			
			</div><!-- .site-branding -->
	
			<nav id="site-navigation" class="main-navigation" role="navigation">
				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'cazooz' ); ?></button>
				
			</nav><!-- #site-navigation -->
			<?php get_search_form(); ?>
			<div id="login-signup">
				<?php wp_nav_menu( array( 'theme_location' => 'login-logout-register', 'menu_id' => 'login-signup-menu' ) ); ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
			</div>
		</div><!-- .header-wrapper -->
	</header><!-- #masthead -->

	<div id="content" class="site-content">

Open in new window


Here's where I registered my menu in a custom functions file:

/**
 * Additional Menus 
 */

function cazooz_register_my_menu() {
  register_nav_menus(
    array(
      'login-logout-register' => __( 'Login Logout Register' ),
      'account-menu' => __( 'Account Menu' )
    )
  );
}
add_action( 'init', 'cazooz_register_my_menu' );

Open in new window


I've added an array to Zozo and got the tabs back:

wp_enqueue_script( 'zozo.tabs.min', get_template_directory_uri() . '/js/zozo.tabs.min.js', array('jquery'), '20161213', true );
	wp_enqueue_script( 'cazooz-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), 	'20151215', true );

Open in new window


But, adding the array to navigation.js didn't help the navigation issue.
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Okay, DOH!
Fixed it. The menu issue.

I customized the menus and took primary menu out of the #main-navigation div. None of the CSS was applying. I wrapped it in the div, and we're cookin' now!
0
Julian HansenCommented:
Cool bananas, anything else we need to address or has the issue been solved?
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Thanks everyone. Turned out to jQuery library on the Tabs and I figured out the menu myself!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.