Wordpress Menu not working on mobile
Question
I've just uploaded my first ever custom theme to a website of mine, everything was going great until I checked the website on my mobile and realised that when I click on the hamburger menu, nothing happened. Here is my website:
timothycdavis.co.uk
Here are the links to my style.css file, my bootstrap file.
And below are my functions.php file and header.php file
Functions.php:
// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');
// Theme Support
function wpb_theme_setup(){
// Nav Menu
register_nav_menus(array(
'primary' => __('Primary Menu ')
));
}
add_action('after_setup_theme', 'wpb_theme_setup');
add_action( 'wp_loaded', 'wpse248829_register_scripts' );
function wpse248829_register_scripts() {
wp_register_script( 'character-counter-script-js', get_template_directory_uri() . '/js/char-counter.min.js', array( 'jquery' ), false, true );
wp_register_script( 'tweet-counter', get_template_directory_uri() . '/js/tweet-counter.min.js', array( 'jquery' ), false, true );
wp_register_script( 'title-tag-counter-script', get_template_directory_uri() . '/char-counter/js/title-tag.min.js', array( 'jquery' ), false, true );
wp_register_script( 'description-counter-script', get_template_directory_uri() . '/js/description-tag.min.js', array( 'jquery' ), false, true );
}
//Enqueue scripts/styles.
add_action( 'wp_enqueue_scripts', 'wpse248829_enqueue_scripts' );
function wpse248829_enqueue_scripts() {
// Load everywhere.
wp_enqueue_style( 'style', get_stylesheet_uri() );
// Probably not needed, because it was already specified as a dependency.
// wp_enqueue_script( 'jquery' );
// Only enqueue scripts/styles on static front page.
if ( is_front_page() ) {
wp_enqueue_script( 'character-counter-script-js' );
}
if ( is_page_template( 'tweet-template.php' ) ) {
wp_enqueue_script( 'tweet-counter' );
}
if ( is_page_template( 'title-tag-template.php' ) ) {
wp_enqueue_script( 'title-tag-counter-script' );
}
if ( is_page_template( 'description-tag-template.php' ) ) {
wp_enqueue_script( 'description-counter-script' );
}
}
require get_template_directory() . '/inc/customizer.php';
Header.php
<!DOCTYPE html>
<html dir="ltr" lang="en-GB" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Core CSS -->
<link href="<?php bloginfo('template_url') ?>/css/bootstrap.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://timothycdavis.co.uk/wp-content/themes/char-counter/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!-- Theme CSS -->
<link rel="shortcut icon" href="/img/favicon.ico">
<script src="//load.sumome.com/" data-sumo-site-id="63887403fa39b3ec361069237f61eca50baf36e10e2973ac54b998b5095b3bb2" async="async"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<title><?php wp_title(''); ?></title>
<?php wp_head(); ?>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div id="wrapper" class="clearfix" itemprop="mainContentOfPage">
<nav id="mainNav" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php if ( get_theme_mod( 'm1_logo' ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" id="site-logo" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo get_theme_mod( 'm1_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
<?php else : ?>
<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
</hgroup>
<?php endif; ?>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Aplogies for my poorly written code in advance, and thanks in advance.
1 answers
solution1
0 ACCPTED 2016-12-12 17:21:57
You are getting the following error in your js console:
TypeError: $ is not a function
When I track it down, it is here:
var initTop=new Array();;$("textarea").on("input",function ...etc
Do two things:
- Be sure that your calls using jQuery syntax are only called after jQuery is available (for instance inside your existing
jQuery(document).ready(call in that same js file) - Be sure that you can use
$()syntax...your other calls seem to usejQuery()syntax meaning you may have no conflict mode turn on.
UPDATE
Okay, now that your JS error is fixed, your nav is loading. Good job. Next, you have a bit of a overzealous implementation of the nav. Please note that in the HTML DOM, every id="" must have a unique value.
You will find that in your implementation the id bs-example-navbar-collapse-1 is used two times. If you only use it once, your nav will work just fine. What's happening now is that your JavaScript is finding the first (since there is only supposed to be one), and while it's opening that one, the other one is left hidden.
See this video:
http://screencast.com/t/GdGHeL2U0yF
I believe this translates into the following code being what you want:
<!-- Collect the nav links, forms, and other content for toggling -->
<?php
/* <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> NO */
/* <ul class="nav navbar-nav navbar-right"> NO */
// now let the thing build itself and don't help
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
/* </ul> NO */
/* </div> NO */
?>
<!-- /.navbar-collapse -->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
wordpress navigation menu not working
Bootstrap mobile menu doesn't show in wordpress
Materializecss wordpress mobile side menu in a collapsible
How to show mobile-menu in WordPress?
How to add the search bar to mobile menu in wordpress?
Delete a menu item in mobile mode in WordPress
HTML Buttons not working on mobile in Wordpress
Navbar is not working when resizing the browser windows on one WordPress theme and after adding the JS code mobile menu close button is not working
WordPress Sidebar Menu not working with CSS
wordpress blog menu link not working
Related Tags