Menu icon Foundation
Foundation 6 responsive navigation menu for WordPress

Hi,

I've had a nightmare solving how to put a Foundation 6 responsive navigation menu into Wordpress with its strange Walker class.

WLC designs have a great article that gets the responsive menu working, however, it doesn't seem to make the mobile menu horizontal, which I didn't want.

So here's the solution I've found by adapting WLC Designs' code for it so that you have either a drilldown menu or an accordion menu when you switch to responsive mobile view.

Register the navigation menu

For either style of menu, you need to register the menu in your functions.php file:

function _register_menu() {
    register_nav_menu( 'primary', __( 'Primary Menu','textdomain' ) );
}

//Add Menu to theme setup hook
add_action( 'after_setup_theme', '_theme_setup' );

function _theme_setup()
{
    add_action( 'init', '_register_menu' );       

    //Theme Support
    add_theme_support( 'menus' );
}

 

After registering the menu, choose one of the sections below - either the drilldown or the accordion style mobile menu.

 

Drilldown mobile navigation menu in Foundation 6

In the functions.php file:

class F6_DRILL_MENU_WALKER extends Walker_Nav_Menu {
	/*
	 * Add vertical menu class
	 */

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

function f6_drill_menu_fallback( $args ) {
	/*
	 * Instantiate new Page Walker class instead of applying a filter to the
	 * "wp_page_menu" function in the event there are multiple active menus in theme.
	 */

	$walker_page = new Walker_Page();
	$fallback    = $walker_page->walk( get_pages(), 0 );
	$fallback    = str_replace( "children", "children vertical menu", $fallback );
	echo '<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" style="width: 100%;">' . $fallback . '</ul>';
}

 

 

In the header.php file: 

<div class="row">
		<div class="title-bar" data-responsive-toggle="the-menu" data-hide-for="medium">
			<button class="menu-icon" type="button" data-toggle></button>
			<div class="title-bar-title">MENU</div>
		</div>



		<div class="top-bar" id="the-menu">
		    <div class="top-bar-right">

			    <?php
					wp_nav_menu( array(
						'container'      => false,
						'menu'           => 'Primary Menu',
						'menu_class'     => 'vertical medium-horizontal menu',
						'theme_location' => 'primary',
						'items_wrap'     => '<ul id="%1$s" class="%2$s" data-responsive-menu="drilldown medium-dropdown" style="width: 100%;">%3$s</ul>',
						//Recommend setting this to false, but if you need a fallback...
						'fallback_cb'    => 'f6_drill_menu_fallback',
						'walker'         => new F6_DRILL_MENU_WALKER()
					) );

					?>
		    </div>

		</div>
	</div>

 

 

 

 

 

 

 

 

 

Accordion mobile navigation menu in Foundation 6

In the functions.php file:

 

 

class F6_ACCORDION_MENU_WALKER extends Walker_Nav_Menu {
	/*
	 * Add vertical menu class and submenu data attribute to sub menus
	 */

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

//Optional fallback
function f6_accordion_menu_fallback( $args ) {
	/*
	 * Instantiate new Page Walker class instead of applying a filter to the
	 * "wp_page_menu" function in the event there are multiple active menus in theme.
	 */

	$walker_page = new Walker_Page();
	$fallback    = $walker_page->walk( get_pages(), 0 );
	$fallback    = str_replace( "<ul class='children'>", '<ul class="children submenu menu vertical" data-submenu>', $fallback );

	echo '<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">' . $fallback . '</ul>';
}

 

In the header.php file:

<div class="row">
		<div class="title-bar" data-responsive-toggle="the-menu" data-hide-for="medium">
			<button class="menu-icon" type="button" data-toggle></button>
			<div class="title-bar-title">MENU</div>
		</div>


		<div class="top-bar" id="the-menu">
			<div class="top-bar-right">

				<?php
				wp_nav_menu( array(
					'container'      => false,
					'menu'           => 'Primary Menu',
					'menu_class'     => 'vertical medium-horizontal menu',
					'theme_location' => 'primary',
					'items_wrap'     => '<ul id="%1$s" class="%2$s" data-responsive-menu="accordion medium-dropdown">%3$s</ul>',
					//Recommend setting this to false, but if you need a fallback...
					'fallback_cb'    => 'f6_accordion_menu_fallback',
					'walker'         => new F6_ACCORDION_MENU_WALKER()
				) );

				?>
			</div>

		</div>
	</div>
 
 

 

So I hope that helps. Let me know either way in the comments.

Happy coding ;)

 

 

 

 

 

 

 

 

 

 

 

wordpressmobilenavigationResponsivefoundation 6menuaccordiondrilldown

Hi,

I've had a nightmare solving how to put a Foundation 6 responsive navigation menu into Wordpress with its strange Walker class.

WLC designs have a great article that gets the responsive menu working, however, it doesn't seem to make the mobile menu horizontal, which I didn't want.

So here's the solution I've found by adapting WLC Designs' code for it so that you have either a drilldown menu or an accordion menu when you switch to responsive mobile view.

Register the navigation menu

For either style of menu, you need to register the menu in your functions.php file:

function _register_menu() {
    register_nav_menu( 'primary', __( 'Primary Menu','textdomain' ) );
}

//Add Menu to theme setup hook
add_action( 'after_setup_theme', '_theme_setup' );

function _theme_setup()
{
    add_action( 'init', '_register_menu' );       

    //Theme Support
    add_theme_support( 'menus' );
}

 

After registering the menu, choose one of the sections below - either the drilldown or the accordion style mobile menu.

 

Drilldown mobile navigation menu in Foundation 6

In the functions.php file:

class F6_DRILL_MENU_WALKER extends Walker_Nav_Menu {
	/*
	 * Add vertical menu class
	 */

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

function f6_drill_menu_fallback( $args ) {
	/*
	 * Instantiate new Page Walker class instead of applying a filter to the
	 * "wp_page_menu" function in the event there are multiple active menus in theme.
	 */

	$walker_page = new Walker_Page();
	$fallback    = $walker_page->walk( get_pages(), 0 );
	$fallback    = str_replace( "children", "children vertical menu", $fallback );
	echo '<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" style="width: 100%;">' . $fallback . '</ul>';
}

 

 

In the header.php file: 

<div class="row">
		<div class="title-bar" data-responsive-toggle="the-menu" data-hide-for="medium">
			<button class="menu-icon" type="button" data-toggle></button>
			<div class="title-bar-title">MENU</div>
		</div>



		<div class="top-bar" id="the-menu">
		    <div class="top-bar-right">

			    <?php
					wp_nav_menu( array(
						'container'      => false,
						'menu'           => 'Primary Menu',
						'menu_class'     => 'vertical medium-horizontal menu',
						'theme_location' => 'primary',
						'items_wrap'     => '<ul id="%1$s" class="%2$s" data-responsive-menu="drilldown medium-dropdown" style="width: 100%;">%3$s</ul>',
						//Recommend setting this to false, but if you need a fallback...
						'fallback_cb'    => 'f6_drill_menu_fallback',
						'walker'         => new F6_DRILL_MENU_WALKER()
					) );

					?>
		    </div>

		</div>
	</div>

 

 

 

 

 

 

 

 

 

Accordion mobile navigation menu in Foundation 6

In the functions.php file:

 

 

class F6_ACCORDION_MENU_WALKER extends Walker_Nav_Menu {
	/*
	 * Add vertical menu class and submenu data attribute to sub menus
	 */

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

//Optional fallback
function f6_accordion_menu_fallback( $args ) {
	/*
	 * Instantiate new Page Walker class instead of applying a filter to the
	 * "wp_page_menu" function in the event there are multiple active menus in theme.
	 */

	$walker_page = new Walker_Page();
	$fallback    = $walker_page->walk( get_pages(), 0 );
	$fallback    = str_replace( "<ul class='children'>", '<ul class="children submenu menu vertical" data-submenu>', $fallback );

	echo '<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">' . $fallback . '</ul>';
}

 

In the header.php file:

<div class="row">
		<div class="title-bar" data-responsive-toggle="the-menu" data-hide-for="medium">
			<button class="menu-icon" type="button" data-toggle></button>
			<div class="title-bar-title">MENU</div>
		</div>


		<div class="top-bar" id="the-menu">
			<div class="top-bar-right">

				<?php
				wp_nav_menu( array(
					'container'      => false,
					'menu'           => 'Primary Menu',
					'menu_class'     => 'vertical medium-horizontal menu',
					'theme_location' => 'primary',
					'items_wrap'     => '<ul id="%1$s" class="%2$s" data-responsive-menu="accordion medium-dropdown">%3$s</ul>',
					//Recommend setting this to false, but if you need a fallback...
					'fallback_cb'    => 'f6_accordion_menu_fallback',
					'walker'         => new F6_ACCORDION_MENU_WALKER()
				) );

				?>
			</div>

		</div>
	</div>
 
 

 

So I hope that helps. Let me know either way in the comments.

Happy coding ;)

 

 

 

 

 

 

 

 

 

 

 

Severina over 2 years ago

 Top bar style is the defaulting integrated with the organization framework. Some customization is feasible using Foundation and/or WordPress methods, assignment assistance but any customizations must be implemented by theme developers.

 

nyosor almost 2 years ago

i will try your article, responsive navigation is very useful to apply in my blog

Mike Kostunin over 1 year ago

Please, check "Accordion mobile navigation" function.php tutorial, it's no information. thx