'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: ' ' //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');
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
