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 8
Alicia St RoseOwner & Principle Developer/DesignerAsked:
Who is Participating?
 
Leonidas DosasConnect With a Mentor Commented:
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
 
Lucas BishopConnect With a Mentor Click 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
 
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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 RoseConnect With a Mentor Owner & 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
All Courses

From novice to tech pro — start learning today.