menu-toggle lost functionality?!

  • Resolved Khadesa

    (@khadesa)


    9 years, 2 months ago

    Hey guys,

    I’m afraid my menu button (when the nav bar shrinks) has lost it’s functionality, it used to expand a dropdown menu, but now, nothing.

    I wish i could be more specific in my query, but i haven’t touched any code relating to the menu toggle navigation.

    I’ve just recently noticed it’s not working, for how long? i don’t know :S

    the site is:
    https://www.niika-dev.com/Webb

    Would be super grateful for any advice anyone can offer :]

Viewing 9 replies - 1 through 9 (of 9 total)

  • How is your menu supposed to work? I don’t see any JS on the page that would toggle the menu. It looks like you’re using a custom-designed theme; have you spoken to your theme’s developers?

    Thread Starter Khadesa

    (@khadesa)

    Thanks for the response steve,

    Ahh, so it’s just a twenty13 theme, with extreme css changes, but as far as the navbar is concerned, just it’s colors and font have changed.

    I’m not sure about the .js but i haven’t taken any out, and i’m sure there would have been some in there originally to have had it working in the first place.

    What’s supposed to happen, when the page is narrower that 840px, the menu changes to just read ‘menu V‘ The user then clicks this, and it will expand/open a drop down menu with the original menu options.

    Thread Starter Khadesa

    (@khadesa)

    Okay, here’s the menu-toggle code, from header.php

    <div id="navbar" class="navbar">
				<nav id="site-navigation" class="navigation main-navigation" role="navigation">
					<button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
					<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
					<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
					<?php get_search_form(); ?>
				</nav><!-- #site-navigation -->
			</div><!-- #navbar -->

    hopefully that sheds some light on the situation…

    It looks fairly heavily customized. Have you spoken to whomever originally customized the theme? Twenty Thirteen includes some JS to toggle the menu; did that person remove the script?

    Thread Starter Khadesa

    (@khadesa)

    I’m the only one who’s touched in, pretty much.
    And nope, i’ve hardly touched the header.php (where all the script linkage is)

    Here is the entire header.php, you can see the obvious 4 scripts ive added

    <?php
/**
 * The Header template for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
	<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.11.1.min.js"></script>
	<script src="<?php bloginfo('template_url'); ?>/js/niika.js"></script>
							    <!-- Contact Form JavaScript -->
							<script src="js/jqBootstrapValidation.js"></script>
							<script src="js/contact_me.js"></script>
</head>

<body <?php body_class(); ?>>
	<div id="page" class="hfeed site">
		<header id="masthead" class="site-header" role="banner">
			<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
				<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
				<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
			</a>

			<div id="navbar" class="navbar">
				<nav id="site-navigation" class="navigation main-navigation" role="navigation">
					<button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
					<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
					<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
					<?php get_search_form(); ?>
				</nav><!-- #site-navigation -->
			</div><!-- #navbar -->
		</header><!-- #masthead -->

		<div id="main" class="site-main">

    I wrote a bit of JS you could use. Save this into a script and load it after the call to /js/jquery-1.11.1.min.js:

    jQuery(document).ready( function( $ ) {
    var button = $( '.menu-toggle' );
    var menu = $( 'ul.nav-menu' );

    console.log( menu );
    button.on( 'click', function( e ) {
        e.preventDefault();
        menu.toggleClass( 'on' )
    } );
} );

    Then, in your stylesheet, use this code to show the menu:

    .nav-menu.on {
	display: block;
}

    That will at least get you up and running again, although you’d still probably want to find out exactly what happened to the script that originally toggled the menu.

    Thread Starter Khadesa

    (@khadesa)

    Stephen Cottontail.

    You dead set legend.

    I thank thee with the volume of a thousand volcanoes.

    My gratitude is stronger than a thousand winds.

    You have no idea how much you’ve helped me, i’m in a very awkward position at a wordpress internship, and you’ve just given me artillery.

    I just can’t wrap my head around js, actionscript is so easy, but js is whack… for example, what does $ mean?

    Dude, i hope you win the lottery, or get a date with Angelina Jolie or something. You deserve it.

    $ is the shortcut character, in this case. Normally, I’d have to write jQuery everywhere I used the $, so the interpreter would know I’m using a jQuery object.

    Thread Starter Khadesa

    (@khadesa)

    Hey Stephen!
    how’s everything?

    Just wanted you to ask you, this same problem happened to me again on another site.

    It happens i think after creating a new main menu, switching to it. My toggle drop down has gone again, and i’m afraid your last script isn’t changing anything.

    Any ideas on what i could try?

    I thought maybe something in the wordpress dashboard, in particular, a setting on the new menu?

    Thanks for any advice/suggestions

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘menu-toggle lost functionality?!’ is closed to new replies.