foundation-topbar-menu.php and foundation-topbar-walker.php should be required in the WordPress functions.php file.
The code in foundation-topbar.php should be added below the body tag in header.php
Setup a menu in WordPress admin under Appearance > Menus
Use the 'label' class on a menu item to create a menu section title
Foundation Top Bar Doc: http://foundation.zurb.com/docs/components/top-bar.html
| <?php | |
| /** | |
| * Customize the output of menus for Foundation top bar | |
| */ | |
| class top_bar_walker 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' : ''; | |
| 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"; | |
| } | |
| } | |
| ?> |
| <div class="top-bar-container fixed contain-to-grid"> | |
| <nav class="top-bar"> | |
| <ul class="title-area"> | |
| <li class="name"> | |
| <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1> | |
| </li> | |
| <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> | |
| </ul> | |
| <section class="top-bar-section"> | |
| <?php foundation_top_bar_l(); ?> | |
| <?php foundation_top_bar_r(); ?> | |
| </section> | |
| </nav> | |
| </div> |
The "not-click" class is added by foundation.topbar.js on-the-fly when the menu is in "hover" mode. If you're not seeing the "not-click" class applied to your parent li's at runtime, then maybe check for jQuery conflict like the author said or any other errors in your console. Might save more aggravation later..
Thanks a lot for this, exactly what I was looking for. Saved me loads of time!
Just as I thought! I was trying to make it work and I thought "someone in the world must have solved this already".
Put this star at your code.
Thanks a lot for sharing this. But...I just can't get this to work. Granted, I don't know a lot about these things. I have done as you advised, included the files, added the script as advised at http://foundation.zurb.com/docs/components/top-bar.html, added the CSS and the menu bar does indeed appear.
It also turns into the mobile menu when I decrease the browser width (Chrome).
But upon clicking on the menu, it does not drop down (I did use the code with the fixes by . How can I troubleshoot this?
I am using this for a Wordpress installtion with a Twenty Twelve Child Theme.
Thank you.
is there any update for foundation 5? it's not working with foundation 5 now.
Thanks :)
oops just found data-topbar .. it works great
Not working with Foundation 5? hicc :?
Works for me with foundation 5 and Wordpress 3.7.1.
For drop down I added "not-click" like 808chris suggested. Works fine. Thank you
Ah this is awesome. I'm so close. Nothing showing up though. Using F5 but so far no luck. What am I missing?
Did I miss something?
Ah! I got it working. Awesome.
I'm using F5 also. I have the navigation working but when it gets to a smart phone screen it doesn't work for some reason. Any ideas why?
** I FOUND THE FIX. If you downloaded Foundation 5.0.0 then you will have issues. If you download 5.0.1 or 5.0.2 it will fix it for you.
Thank you so much for this code. I've got Foundation 5.0.2. working with normal nav and mobile. I'm wondering if anyone also had a problem with the dropdown menu's. I can't get them to work. I can click on the parent, and darkens it's color, but no dropdown appears. I've already tried z-index.
Sending positive vibes - because you deserve them. Thanks for taking the time to put this together - hugely useful. @awshout
Thank you so much for this code
I'm not sure if anyone commented on this so I'm just going to throw this out there. When the menu goes below 767px a parent tab that has a page attached to it and children becomes a non usable tab. You click on it and it just slides the menu over to the children rather than actually going to that page. Has anyone else experienced that and if so what was the fix to this? Thanks.
@StefsterNYC I have this issue too, but on every size. Do you have any news about this issue already?
@aweshout I used the function you wrote to add a search input to the right menu, and it is not showing up in the top bar menu. I added the function inside foundation-topbar-menu.php. Was that the wrong place to add it?
<div class="top-bar-container fixed contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<?php foundation_top_bar_l(); ?>
<?php foundation_top_bar_r(); ?>
<ul class="right"><li><?php top_bar_search(); ?></li>
</section>
</nav>
</div>
{
// code
}
Very useful and time saving, thanks for making this public!
manually added the "not-click" class which reactivated the dropdown but the mobile/responsive navigation doesn't work any more. suggestions? i click the icon but nothing happens
@flowdee check you have this in your head,
<meta name="viewport" content="width=device-width">
Can anyone point to a functioning starter theme that incorporates this? It would be very helpful to see exactly how this is implemented within the various files. Especially for us beginners. Thanks.
Excellent!
For the search form, or anything at the end of the menu I used this code:
add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
if ($args->theme_location == 'top-bar-r') {
$items .= '<li class="has-form">';
$items .= ' <form role="search" class="searchform" method="get" action="' . home_url() . '">';
$items .= ' <div>';
$items .= ' <input id="sf-s" name="s" value="' . get_search_query() . '" type="text" onkeyup="buttonUp()" placeholder="Search..." />';
$items .= ' <input id="sf-searchsubmit" type="submit" value="" />';
$items .= ' <span class="search-icon-toggle" title="Click to Search"></span>';
$items .= ' </div>';
$items .= ' </form>';
$items .= '</li>';
}
return $items;
}
(Obviously use whatever HTML you need)
I'm trying to add the description
if ( !empty( $item->description ) ) {
$item_html .= '<span class="description">' . esc_attr( $item->description ) . '</span>';
}
But I'm unsure of where to place it amongst all this:
/ CUSTOMIZE THE OUTPUT OF MENUS FOR FOUNDATION TOP BAR
class top_bar_walker 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' : '';
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";
}
}
And also don't I have to add it to call it out in my arguments with something like this?
'walker' => new description_walker()
So far everywhere I've tested adding it, has failed.
The fix to have the dropdown work in foundation 5 (WP 4.1) is change in foundation4-topbar.php file, line 2:
from
<nav class="top-bar">
to
<nav class="top-bar" data-topbar>
thank you for this awshout, it helped a lot!
This hack fixed the above problem for me, though for some reason, I still can't get the menus to display correctly:
$element->has_children = !empty($children_elements[$element->ID]);
$classes = $element->classes;
$classes[] = ($element->current || $element->current_item_ancestor) ? 'active' : '';
$classes[] = ($element->has_children) ? 'has-dropdown' : '';
$element->classes = $classes;