Making Foundation 5 top bar working with WordPress Menu

wp_nav_menu() is a WordPress function to display menu defined with register_nav_menus() in functions.php.

When using foundation framework in a WordPress theme, the standard way to use wp_nav_menu() works if you have a single-level menu, ie no drop-downs. It’s when it’s a multi-level menu with sub-menu in the drop-down that it won’t look nor work properly because foundation has define a set of classes to make it work and those classes aren’t standard in WordPress.

To make it work, you need to call a walker class. Luckily someone has done the hardwork and the code can be easily incorporated to a WordPress theme.

How-to

Note that at the time of writing, this has been tested on wordpress V3.9.1 and Foundation V5.2.3.

Create a file with the menu walker class. include this file in functions.php.

In your navigation section:

<nav class="top-bar" role="navigation" data-topbar>
<ul class="title-area">
    <li class="name">site title</li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
</ul>

<section class="top-bar-section">
    <?php wp_nav_menu(array( 'theme_location' => 'the-menu-defined-in-functions',
        ......
        'walker' => new Top_Bar_Walker,
     )) ?>
</section>
</nav>

Sub-menu on mobile device

Foundation Framework is a responsive framework and the menu is automatically formatted for tablet and mobile devices.

When multi-level menu is defined, you will find that you can click the first level menu item to bring it to a page. However the only thing it does on tablet or devices is scrolling to sub-menu. there’s no way you can access the page from the menu.

The fix

When customizing menu in wordpress, repeat the top menu item as the first item in the sub menu.

If you view source code, there’s an item as first in the menu list that’s hidden on desktop but is displayed on mobile device to go back to the parent menu. The first menu item becomes the second item in the list.

Manipulate the 2nd item on the menu list in CSSĀ file so that it’s not shown on desktop:

@media only screen and (min-width: 40.063em) {
    .top-bar-section ul.dropdown li:nth-child(2) { display: none; }
}

Now you have a perfect Foundation 5 navigation menu for your WordPress theme!

Leave a Reply

Your email address will not be published. Required fields are marked *