Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress WordPress Theme Development Building Out WordPress Navigation The wp_nav_menu Function

Posted by Nijad Kifayeh
Nijad Kifayeh
6,092 Points

Nav not toggling

Having some issues getting the nag to toggle.

Here's my code from functions.php: 

<?php       
function wpt_theme_styles() {
    wp_register_style( 'normalize_css', get_template_directory_uri() . '/css/normalize.css' ) ;
    wp_enqueue_style( 'normalize_css', get_template_directory_uri() . '/css/normalize.css' ) ;

    wp_register_style( 'googleFonts', ' http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' ) ;
    wp_enqueue_style( 'googleFonts', ' http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' ) ;

    wp_register_style( 'foundation_css', get_template_directory_uri() . '/css/foundation.css' ) ;   
    wp_enqueue_style( 'foundation_css', get_template_directory_uri() . '/css/foundations.css' ) ;

    wp_register_style( 'main_css', get_template_directory_uri() . '/style.css' ) ;
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' ) ;
}

add_action( 'wp_enqueue_scripts', 'wpt_theme_styles' );

function wpt_theme_scripts() {
    wp_register_script( 'modernizer_js', get_template_directory_uri() . '/js/modernizr.js', '', '', false ) ;   
    wp_enqueue_script( 'modernizer_js', get_template_directory_uri() . '/js/modernizr.js', '', '', false ) ;    

    wp_register_script( 'foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '', true ) ;  
    wp_enqueue_script( 'foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '', true ) ;   

    wp_register_script( 'main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true ) ;  
    wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true ) ;   
}

add_action( 'wp_enqueue_scripts', 'wpt_theme_scripts' );  
?>

Here's my app.js code: 

$( ".nav-toggle" ).click(function() {
  $(this).toggleClass("open");
  $("nav").fadeToggle(100);

  return false;
});

Also, these errors appeared in the console:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (css, line 0)
[Error] TypeError: undefined is not a function (evaluating '$( ".nav-toggle" )') global code (app.js, line 1)
[Error] Failed to load resource: bad URL (jquery.min.map, line 0)

Jordan Cox
Jordan Cox
8,930 Points
Jordan Cox
Jordan Cox
8,930 Points

I'm confused, where did you get the wp_register_script from? That was not in any of the lessons? My toggle is also broken with no errors and I have checked all the answers and suggestions...

Devinee Fitzgerald
Devinee Fitzgerald
2,709 Points
Devinee Fitzgerald
Devinee Fitzgerald
2,709 Points

Jordan Cox Did you ever find a solution here? I also have no error and my toggle doesn't work.

1 Answer

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

In your app.js are you using document.ready? Maybe you could try:

$(document).ready(function() {
    $(".nav-toggle").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("open");
        $("nav").fadeToggle(100);
    });  
});

Note that I replaced your return false with jQuery's preventDefault.

Nijad Kifayeh
Nijad Kifayeh
6,092 Points

sorry, yes, I was using document.ready.... 

jQuery(document).ready(function($) {
    $(document).foundation();
    $( ".nav-toggle" ).click(function() {
    $(this).toggleClass("open");
    $("nav").fadeToggle(100);

  return false;
});
});

tried your code as well and still not toggling....

Nijad Kifayeh
Nijad Kifayeh
6,092 Points

Mike, it's working now!! Not sure why it took so long, but my guess is maybe the delay was cache related. Thanks!

BTW, I'm not too good w/ query, so can you explain why you replaced return false with jQuery's preventDefault ?

mikes02
mikes02
Courses Plus Student 16,968 Points

Just preference, really, return false would have worked in this case as well, I think that preventDefault is just the more common approach.