PHP Code breaking responsive navigation toggle on homepage

I am having a problem with the responsive menu toggle not expanding on a site I am working on. Essentially when the site is resized below 768px the menu is replaced with a menu toggle that when clicked/tapped it should show the two options About & Shop. However when clicked nothing happens, it simply adds #navigation to the end of the URL.

I have managed to narrow down to one line of code that is for this plugin in my index.php file.

<?php if(sb_slides_display()){sb_slides_display();} ?>

It is a simple WordPress site with WooCommerce using the theme mystile. Link: http://bit.ly/1dvdeb0

If I take out the above code the problem is solved but then of course the slider is no longer activated. Any ideas why or how it can be fixed?

Also, here is the code in context:

<?php
// File Security Check
if ( ! function_exists( 'wp' ) && ! empty( $_SERVER['SCRIPT_FILENAME'] ) && basename( __FILE__ ) == basename( $_SERVER['SCRIPT_FILENAME'] ) ) {
    die ( 'You do not have sufficient permissions to access this page!' );
}
?><?php
/**
 * Index Template
 *
 * Here we setup all logic and XHTML that is required for the index template, used as both the homepage
 * and as a fallback template, if a more appropriate template file doesn't exist for a specific context.
 *
 * @package WooFramework
 * @subpackage Template
 */
    get_header();
    global $woo_options;

?>
    <?php if(sb_slides_display()){sb_slides_display();} ?>

    <?php if ( $woo_options[ 'woo_homepage_banner' ] == "true" ) { ?>

        <div class="homepage-banner">
            <?php
                if ( $woo_options[ 'woo_homepage_banner' ] == "true" ) { $banner = $woo_options['woo_homepage_banner_path']; }
                if ( $woo_options[ 'woo_homepage_banner' ] == "true" && is_ssl() ) { $banner = preg_replace("/^http:/", "https:", $woo_options['woo_homepage_banner_path']); }
            ?>
                <img src="<?php echo $banner; ?>" alt="" />
            <h1><span><?php echo $woo_options['woo_homepage_banner_headline']; ?></span></h1>
            <div class="description"><?php echo wpautop($woo_options['woo_homepage_banner_standfirst']); ?></div>
        </div>

    <?php } ?>

    <div id="content" class="col-full <?php if ( $woo_options[ 'woo_homepage_banner' ] == "true" ) echo 'with-banner'; ?> <?php if ( $woo_options[ 'woo_homepage_sidebar' ] == "false" ) echo 'no-sidebar'; ?>">

Thanks in advance for any help it’s greatly appreciated! 🙂

EDIT: JavaScript page from console error Uncaught TypeError: Object [object Object] has no method ‘fitVids’ :

/*-----------------------------------------------------------------------------------*/
/* GENERAL SCRIPTS */
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){

    // Fix dropdowns in Android
    if ( /Android/i.test( navigator.userAgent ) && jQuery( window ).width() > 769 ) {
        $( '.nav li:has(ul)' ).doubleTapToGo();
    }

    // Table alt row styling
    jQuery( '.entry table tr:odd' ).addClass( 'alt-table-row' );

    // FitVids - Responsive Videos
    jQuery( ".post, .widget, .panel" ).fitVids();

    // Add class to parent menu items with JS until WP does this natively
    jQuery("ul.sub-menu").parents('li').addClass('parent');


    // Responsive Navigation (switch top drop down for select)
    jQuery('ul#top-nav').mobileMenu({
        switchWidth: 767,                   //width (in px to switch at)
        topOptionText: 'Select a page',     //first option text
        indentString: '&nbsp;&nbsp;&nbsp;'  //string for indenting nested items
    });



    // Show/hide the main navigation
    jQuery('.nav-toggle').click(function() {
      jQuery('#navigation').slideToggle('fast', function() {
        return false;
        // Animation complete.
      });
    });

    // Stop the navigation link moving to the anchor (Still need the anchor for semantic markup)
    jQuery('.nav-toggle a').click(function(e) {
        e.preventDefault();
    });

    // Add parent class to nav parents
    jQuery("ul.sub-menu, ul.children").parents().addClass('parent');

});

Answer

From Hobo in the comments above:

fitvids and mobileMenu are both declared in third-party.js. To my eye they look like they don’t need noConflict – I think that’s for when you want to use $ instead of jQuery, but your code uses jQuery, so should be OK. I now think the problem is that jQuery is being included twice – try removing the second one (v1.8.2, from the Google CDN). It’s probably (judging by proximity) where your slicebox.js is included.

Advertisement

Answer