Menu icon Foundation
Wordpress mobile menu not working (&rollovers..)

Hi there, i tried several options/variations, but i just can't get it to work right. The foundation grid ed. is working fine, The topbar is displayed and clickable.. but the mobile icon (hamburger) does nothing when i click on it..

Another (maybe connected?.) problem: there's no rollover effect in the menu, like on the foundation site. I also tried disabling the wordpress css. I use a base called _Underscores.

Thnx in advance!

My functions.php:

<?php
/**
 * blikvoer functions and definitions
 *
 * @package blikvoer
 */

/**
 * Set the content width based on the theme's design and stylesheet.
 */
if ( ! isset( $content_width ) ) {
    $content_width = 640; /* pixels */
}

if ( ! function_exists( 'blikvoer_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 */
function blikvoer_setup() {

    /*
	 * Make theme available for translation.
	 * Translations can be filed in the /languages/ directory.
	 * If you're building a theme based on blikvoer, use a find and replace
	 * to change 'blikvoer' to the name of your theme in all the template files
	 */
	load_theme_textdomain( 'blikvoer', get_template_directory() . '/languages' );

	// Add default posts and comments RSS feed links to head.
	add_theme_support( 'automatic-feed-links' );

	/*
	 * Let WordPress manage the document title.
	 * By adding theme support, we declare that this theme does not use a
	 * hard-coded <title> tag in the document head, and expect WordPress to
	 * provide it for us.
	 */
	add_theme_support( 'title-tag' );

	/*
	 * Enable support for Post Thumbnails on posts and pages.
	 *
	 * @link http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
	 */
	//add_theme_support( 'post-thumbnails' );

	// This theme uses wp_nav_menu() in one location.
	register_nav_menus( array(
		'primary' => __( 'Primary Menu', 'blikvoer' ),
	) );


	class GC_walker_nav_menu extends Walker_Nav_Menu {

		function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
		$element->has_children = !empty( $children_elements[$element->ID] );
		$element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : '';
		$element->classes[] = ( $element->has_children ) ? 'has-dropdown not-click' : '';

		parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
	}

	function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {
		$item_html = '';
		parent::start_el( $item_html, $object, $depth, $args );

		$output .= ( $depth == 0 ) ? '<li class="divider"></li>' : '';

		$classes = empty( $object->classes ) ? array() : (array) $object->classes;
		if ( in_array('label', $classes) ) {
			$output .= '<li class="divider"></li>';
			$item_html = preg_replace( '/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html );
		}

		if ( in_array('divider', $classes) ) {
			$item_html = preg_replace( '/<a[^>]*>( .* )<\/a>/iU', '', $item_html );
		}

		$output .= $item_html;
	}

	function start_lvl( &$output, $depth = 0, $args = array() ) {
		$output .= "\n<ul class=\"sub-menu dropdown\">\n";
	}

}

	/*
	 * Switch default core markup for search form, comment form, and comments
	 * to output valid HTML5.
	 */
	add_theme_support( 'html5', array(
		'search-form', 'comment-form', 'comment-list', 'gallery', 'caption',
	) );

	/*
	 * Enable support for Post Formats.
	 * See http://codex.wordpress.org/Post_Formats
	 */
	add_theme_support( 'post-formats', array(
		'aside', 'image', 'video', 'quote', 'link',
	) );

	// Set up the WordPress core custom background feature.
	/*
add_theme_support( 'custom-background', apply_filters( 'blikvoer_custom_background_args', array(
		'default-color' => 'ffffff',
		'default-image' => '',
	) ) );
*/
}
endif; // blikvoer_setup
add_action( 'after_setup_theme', 'blikvoer_setup' );

/**
 * Register widget area.
 *
 * @link http://codex.wordpress.org/Function_Reference/register_sidebar
 */
function blikvoer_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Sidebar', 'blikvoer' ),
		'id'            => 'sidebar-1',
		'description'   => '',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'blikvoer_widgets_init' );

/**
 * Enqueue scripts and styles.
 */
function blikvoer_scripts() {
	wp_enqueue_style( 'blikvoer-style', get_stylesheet_uri() );

  /* Add Foundation CSS */
	wp_enqueue_style( 'foundation-normalize', get_stylesheet_directory_uri() . '/foundation/css/normalize.css' );
	wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/foundation/css/foundation.css' );

  /* Add Foundation JS */
	wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/foundation/js/foundation.min.js', array( 'jquery' ), '1', true );
	wp_enqueue_script( 'foundation-modernizr-js', get_template_directory_uri() . '/foundation/js/vendor/modernizr.js', array( 'jquery' ), '1', true );

   /* Foundation Init JS */
		wp_enqueue_script( 'foundation-init-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.js', array( 'jquery' ), '1', true );

	/* Foundation Equalizer JS */
	wp_enqueue_script( 'foundation-equalizer-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.equalizer.js', array( 'jquery' ), '1', true );


//	wp_enqueue_style( 'blikvoer-style-content-sitebar', get_template_directory_uri() . '/layouts/content-sidebar.css' );

	/* Google fonts & fontawesome */
	wp_enqueue_style( 'blikvoer-style-google-fonts', 'http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' );
	wp_enqueue_style( 'blikvoer-style-fontawesome', 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

	wp_enqueue_script( 'blikvoer-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

	wp_enqueue_script( 'blikvoer-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'blikvoer_scripts' );



/**
 * Implement the Custom Header feature.
 */
// require get_template_directory() . '/inc/custom-header.php';

/**
 * Custom template tags for this theme.
 */
require get_template_directory() . '/inc/template-tags.php';

/**
 * Custom functions that act independently of the theme templates.
 */
require get_template_directory() . '/inc/extras.php';

/**
 * Customizer additions.
 */
require get_template_directory() . '/inc/customizer.php';

/**
 * Load Jetpack compatibility file.
 */
require get_template_directory() . '/inc/jetpack.php';

My header.phpw

wordpresstopbarunderscoresmobilehamburgermenu

Hi there, i tried several options/variations, but i just can't get it to work right. The foundation grid ed. is working fine, The topbar is displayed and clickable.. but the mobile icon (hamburger) does nothing when i click on it..

Another (maybe connected?.) problem: there's no rollover effect in the menu, like on the foundation site. I also tried disabling the wordpress css. I use a base called _Underscores.

Thnx in advance!

My functions.php:

<?php
/**
 * blikvoer functions and definitions
 *
 * @package blikvoer
 */

/**
 * Set the content width based on the theme's design and stylesheet.
 */
if ( ! isset( $content_width ) ) {
    $content_width = 640; /* pixels */
}

if ( ! function_exists( 'blikvoer_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 */
function blikvoer_setup() {

    /*
	 * Make theme available for translation.
	 * Translations can be filed in the /languages/ directory.
	 * If you're building a theme based on blikvoer, use a find and replace
	 * to change 'blikvoer' to the name of your theme in all the template files
	 */
	load_theme_textdomain( 'blikvoer', get_template_directory() . '/languages' );

	// Add default posts and comments RSS feed links to head.
	add_theme_support( 'automatic-feed-links' );

	/*
	 * Let WordPress manage the document title.
	 * By adding theme support, we declare that this theme does not use a
	 * hard-coded <title> tag in the document head, and expect WordPress to
	 * provide it for us.
	 */
	add_theme_support( 'title-tag' );

	/*
	 * Enable support for Post Thumbnails on posts and pages.
	 *
	 * @link http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
	 */
	//add_theme_support( 'post-thumbnails' );

	// This theme uses wp_nav_menu() in one location.
	register_nav_menus( array(
		'primary' => __( 'Primary Menu', 'blikvoer' ),
	) );


	class GC_walker_nav_menu extends Walker_Nav_Menu {

		function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
		$element->has_children = !empty( $children_elements[$element->ID] );
		$element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : '';
		$element->classes[] = ( $element->has_children ) ? 'has-dropdown not-click' : '';

		parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
	}

	function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {
		$item_html = '';
		parent::start_el( $item_html, $object, $depth, $args );

		$output .= ( $depth == 0 ) ? '<li class="divider"></li>' : '';

		$classes = empty( $object->classes ) ? array() : (array) $object->classes;
		if ( in_array('label', $classes) ) {
			$output .= '<li class="divider"></li>';
			$item_html = preg_replace( '/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html );
		}

		if ( in_array('divider', $classes) ) {
			$item_html = preg_replace( '/<a[^>]*>( .* )<\/a>/iU', '', $item_html );
		}

		$output .= $item_html;
	}

	function start_lvl( &$output, $depth = 0, $args = array() ) {
		$output .= "\n<ul class=\"sub-menu dropdown\">\n";
	}

}

	/*
	 * Switch default core markup for search form, comment form, and comments
	 * to output valid HTML5.
	 */
	add_theme_support( 'html5', array(
		'search-form', 'comment-form', 'comment-list', 'gallery', 'caption',
	) );

	/*
	 * Enable support for Post Formats.
	 * See http://codex.wordpress.org/Post_Formats
	 */
	add_theme_support( 'post-formats', array(
		'aside', 'image', 'video', 'quote', 'link',
	) );

	// Set up the WordPress core custom background feature.
	/*
add_theme_support( 'custom-background', apply_filters( 'blikvoer_custom_background_args', array(
		'default-color' => 'ffffff',
		'default-image' => '',
	) ) );
*/
}
endif; // blikvoer_setup
add_action( 'after_setup_theme', 'blikvoer_setup' );

/**
 * Register widget area.
 *
 * @link http://codex.wordpress.org/Function_Reference/register_sidebar
 */
function blikvoer_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Sidebar', 'blikvoer' ),
		'id'            => 'sidebar-1',
		'description'   => '',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'blikvoer_widgets_init' );

/**
 * Enqueue scripts and styles.
 */
function blikvoer_scripts() {
	wp_enqueue_style( 'blikvoer-style', get_stylesheet_uri() );

  /* Add Foundation CSS */
	wp_enqueue_style( 'foundation-normalize', get_stylesheet_directory_uri() . '/foundation/css/normalize.css' );
	wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/foundation/css/foundation.css' );

  /* Add Foundation JS */
	wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/foundation/js/foundation.min.js', array( 'jquery' ), '1', true );
	wp_enqueue_script( 'foundation-modernizr-js', get_template_directory_uri() . '/foundation/js/vendor/modernizr.js', array( 'jquery' ), '1', true );

   /* Foundation Init JS */
		wp_enqueue_script( 'foundation-init-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.js', array( 'jquery' ), '1', true );

	/* Foundation Equalizer JS */
	wp_enqueue_script( 'foundation-equalizer-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.equalizer.js', array( 'jquery' ), '1', true );


//	wp_enqueue_style( 'blikvoer-style-content-sitebar', get_template_directory_uri() . '/layouts/content-sidebar.css' );

	/* Google fonts & fontawesome */
	wp_enqueue_style( 'blikvoer-style-google-fonts', 'http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' );
	wp_enqueue_style( 'blikvoer-style-fontawesome', 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

	wp_enqueue_script( 'blikvoer-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

	wp_enqueue_script( 'blikvoer-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'blikvoer_scripts' );



/**
 * Implement the Custom Header feature.
 */
// require get_template_directory() . '/inc/custom-header.php';

/**
 * Custom template tags for this theme.
 */
require get_template_directory() . '/inc/template-tags.php';

/**
 * Custom functions that act independently of the theme templates.
 */
require get_template_directory() . '/inc/extras.php';

/**
 * Customizer additions.
 */
require get_template_directory() . '/inc/customizer.php';

/**
 * Load Jetpack compatibility file.
 */
require get_template_directory() . '/inc/jetpack.php';

My header.phpw

This post has been closed. No new replies can be added.

Esa Rantanen over 4 years ago

Hi David,

your wp_nav_menu setup looks a little incomplete.

Check out FoundationPress: https://github.com/olefredrik/FoundationPress

and it's /library and /parts
Should give you a good starting point.

david over 4 years ago

I tried to edit my post, but my header code =
```PHP

<?php
/**
* The header for our theme.
*
* Displays all of the section and everything up till
*
* @package blikvoer
*/
?><!DOCTYPE html>
>

">


">

<?php wp_head(); ?>

>

<?php _e( 'Skip to content', 'blikvoer' ); ?>

" rel="home"><?php bloginfo( 'name' ); ?>
<?php bloginfo( 'description' ); ?>
<!-- Foundation .columns end -->
<!-- Foundation .row end -->
<!-- .site-branding -->

<!-- foundation menu -->

  <ul class="title-area">
    <li class="name">
      <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">hier een logo</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <?php
      $options = array(
        'theme_location'  => 'primary',
        'container'        => false, // remove nav container
        'depth'            => 5, // limit the depth of the nav
        'items_wrap'       => '<ul id="%1$s" class="right %2$s">%3$s</ul>',
        'walker'          => new GC_walker_nav_menu()
      );
      wp_nav_menu($options);
    ?>
  </section>
</nav><!-- .top-bar -->
<!-- foundation menu end -->

<!-- #masthead -->

david over 4 years ago

I also tried a clean theme (not underscores), same result.. the mobile menu does not open anything.. i just don't get it.. sorry a bit of a Wp noob ;)

Esa Rantanen over 4 years ago

david,
do you happen to have an example of this online?

To start debugging, you could also look at your sourcecode and compare it to how it's done here:
http://foundation.zurb.com/docs/components/topbar.html

Check your JavaScript Setup:
http://foundation.zurb.com/docs/javascript.html
Does everything get loaded ok?

david over 4 years ago

Solved! the problem was in
functions.php:

wp_enqueue_script( 'foundation-topbar-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.topbar.js', array( 'jquery' ), '1', true );

and in footer.php:

jQuery(document).foundation();