Menu icon Foundation
Creating dropdown menu with Wordpress

Hey!

I'm using the awesome FoundationPress theme (http://foundationpress.olefredrik.com), and have used it for a while.

When I set up a menu, I register a custom nav menu using the code that already exists in navigation.php (see below), then set up my menu items in Wordpress (in this example in "Standard Main Menu").

However, for this job I need to use a dropdown menu, and don't seem to be able to get it to work. I've tried mixing in the dropdown styles as per the Foundation dropdown.js page, but it's not working. All js is definitely working, if I copy paste the example dropdown code it works fine, just can't get it to work with the main navigation menu, because it's being generated by Wordpress.

Could anyone please help me out, how I can use Foundation's dropdown system with Wordpress generated nav menu?

Thank you!

// How I register my menus (this is part of FoundationPress theme with my own "standard main menu" added)
register_nav_menus(array(
    'top-bar-l' => 'Left Top Bar', 
    'top-bar-r' => 'Right Top Bar',
    'mobile-off-canvas' => 'Mobile',
    'standard-main-menu' => 'Standard Main Menu'
));
            
// this is again part of foundationpress, just swapped out for my menu rather than top-bar etc
if ( ! function_exists( 'standard_main_menu' ) ) {
    function standard_main_menu() {
	    wp_nav_menu(array( 
	        'container' => false,                           // remove nav container
	        'container_class' => '',                        // class of container
	        'menu' => '',                                   // menu name
	        'menu_class' => 'navigation_large inline-list',            // adding custom nav class
	        'theme_location' => 'standard-main-menu',                // where it's located in the theme
	        'before' => '',                                 // before each link <a> 
	        'after' => '',                                  // after each link </a>
	        'link_before' => '',                            // before each link text
	        'link_after' => '',                             // after each link text
	        'depth' => 5,                                   // limit the depth of the nav
	        'fallback_cb' => false,                         // fallback function (see below)
	    ));
	}
}
         

wordpressfoundationPressdropdowns

Hey!

I'm using the awesome FoundationPress theme (http://foundationpress.olefredrik.com), and have used it for a while.

When I set up a menu, I register a custom nav menu using the code that already exists in navigation.php (see below), then set up my menu items in Wordpress (in this example in "Standard Main Menu").

However, for this job I need to use a dropdown menu, and don't seem to be able to get it to work. I've tried mixing in the dropdown styles as per the Foundation dropdown.js page, but it's not working. All js is definitely working, if I copy paste the example dropdown code it works fine, just can't get it to work with the main navigation menu, because it's being generated by Wordpress.

Could anyone please help me out, how I can use Foundation's dropdown system with Wordpress generated nav menu?

Thank you!

// How I register my menus (this is part of FoundationPress theme with my own "standard main menu" added)
register_nav_menus(array(
    'top-bar-l' => 'Left Top Bar', 
    'top-bar-r' => 'Right Top Bar',
    'mobile-off-canvas' => 'Mobile',
    'standard-main-menu' => 'Standard Main Menu'
));
            
// this is again part of foundationpress, just swapped out for my menu rather than top-bar etc
if ( ! function_exists( 'standard_main_menu' ) ) {
    function standard_main_menu() {
	    wp_nav_menu(array( 
	        'container' => false,                           // remove nav container
	        'container_class' => '',                        // class of container
	        'menu' => '',                                   // menu name
	        'menu_class' => 'navigation_large inline-list',            // adding custom nav class
	        'theme_location' => 'standard-main-menu',                // where it's located in the theme
	        'before' => '',                                 // before each link <a> 
	        'after' => '',                                  // after each link </a>
	        'link_before' => '',                            // before each link text
	        'link_after' => '',                             // after each link text
	        'depth' => 5,                                   // limit the depth of the nav
	        'fallback_cb' => false,                         // fallback function (see below)
	    ));
	}
}
         
Roger Coathup about 5 years ago

I'm not familiar with FoundationPress, but build plenty of sites with WordPress and Fondation.

For nav menu compatibility (including dropdowns), I define the following Walker and filter (in functions.php):

/**
 * Embassy_Walker_Nav_Menu class.
 * 
 * @extends Walker_Nav_Menu
 */
class Embassy_Walker_Nav_Menu extends Walker_Nav_Menu {

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

add_filter( 'wp_nav_menu_objects', 'embassy_menu_parent_class' );

/**
 * embassy_menu_parent_class function.
 * 
 * @access public
 * @param mixed $items
 * @return void
 */
function embassy_menu_parent_class( $items ) {

  $parents = array();
  foreach ( $items as $item ) {
    if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
      $parents[] = $item->menu_item_parent;
    }
  }

  foreach ( $items as $item ) {
    if ( in_array( $item->ID, $parents ) ) {
      $item->classes[] = 'has-dropdown'; 
    }
  }

  return $items;    
}

And then call the menu using:

<section class="top-bar-section">

<?php
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu left', 'container' => '', 'walker' => new Embassy_Walker_Nav_Menu ) );?>  

</section>

Chris M about 5 years ago

Hey Roger,

Thank you for posting your code! I really appreciate you taking the time.

Your code, once I copy it in and register "primary" as a menu, displays the menu, but the dropdowns don't seem to work for me - it displays the dropdown arrow, but the link doesn't work as a dropdown.

Also, is there a way to make the dropdown activate on hover rather than onclick?

Not sure if there's an additional step I've got to take to get this to work?

Thanks again!

Jeremy Englert about 5 years ago

Do you have a link? It almost seems like a JS conflict since the arrows are showing but not functioning.

PS - JointsWP makes it easy to change between offcanvas or dropdown menus - as simple as changing one word in the header.php file.

www.jointswp.com

Jeremy Englert about 5 years ago

Actually, it looks like FoundationPress has a similar functionality, just a bit different.

In header.php, remove line 53 (if it is a clean install). Here is the line of code:

<?php get_template_part('parts/off-canvas-menu'); ?>

In parts/top-bar.php, remove "show-for-medium-up" on line 1 (of a clean install).

That should do the trick.

Chris M about 5 years ago

Hey Jeremy, thanks for taking the time to reply, much appreciated!

I don't have access to that project for the moment but will try it out when I'm back in the office soon. However, what I want isn't to use top-bar or offcanvas - I'm using the offcanvas menu with great results on small screens, what I want to use for larger widths is a non-top-bar navigation menu, made up of an inline-list, which includes dropdowns. Which isn't a problem, until I try and get it set up using a menu created in Wp... I ideally don't want to use top-bar for this.

Thanks again for replying, I've been meaning to try out jointswp for a while, so will give it a whirl when I have a bit more time!

Tarpan over 4 years ago

Fix for the error or similar to below
ErrorException: Runtime Notice: Declaration of Walker_Nav_Menu_Edit::start_lvl() should be compatible with that of Walker_Nav_Menu::start_lvl() in wp-admin/includes/nav-menu.php line 203

Fix
PHP
function start_lvl(&$output, $depth = 0, $args = Array()) {