I just built a site using Twentysixteen child theme and in the process also broke and subsequently fixed the menu on mobile. Here is what I had to fix:
1. The header.php code cannot be rearranged, the menu and menu buttons have to stay inside #masthead. I did end up rearranging it, and then loading my custom version of functions.js using functions.php (see code below)
2. twentysixteen/js/functions.js must be included because it gives the menu its mobile functionality.
I quickly checked trybackyardfarming.com and looked for the code in functions.js, and its seems like it might be missing. It was tricky since that site has the JS files combined.
Here is my functions.php if that helps anyone:
<?php
/**
* Child theme functions.php
*/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
// adds parent & child style.css files
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
// adds child functions.js file and screenReaderText
wp_enqueue_script( 'twentysixteen-child-script', get_stylesheet_directory_uri() . '/js/functions.js', array( 'jquery' ), '20160203', true );
wp_localize_script( 'twentysixteen-child-script', 'screenReaderText', array(
'expand' => __( 'expand child menu', 'twentysixteen-child' ),
'collapse' => __( 'collapse child menu', 'twentysixteen-child' ),
) );
}
add_action( 'wp_print_scripts', 'theme_dequeue_scripts' );
function theme_dequeue_scripts() {
// remove parent functions.js file and screenReaderText
wp_dequeue_script( 'twentysixteen-script' );
wp_deregister_script( 'twentysixteen-script' );
}
Hope this helps someone!
