I absolutely adore Zurb’s Foundation 5 Framework for making responsive websites (and even built my own WordPress Starter Theme based on it) it comes with beautifully simplistic default styles and a range of useful advanced features. However, some aspects can be tricky to properly integrate with WordPress and I am going to show you how to deal with one of those now, the Foundation Top Bar Menu.
The Foundation 5 Top Bar Menu is a brilliant blend of usability, accessibility and power. This is partly why the structure of its HTML differs so greatly from the default WordPress Nav Menu output, meaning that to use it in a WordPress Theme with the inbuilt wp_nav_menu() system we must create a Custom Menu Walker to tell WordPress how to output the right HTML.
If this is what you are looking for, or you want to see the full code it is on Github.
The first challenge is that some of the default arguments you can pass to
wp_nav_menu() are incompatible with the Top Bar output, so I wanted to ensure that users could not accidentally run into problems. The first part of this was filtering the arguements passed to ensure they were compatible:
The two main culprits are ‘container’ and ‘fallback_cb’. The container argument adds an HTML wrapper around the output, which breaks the Top Bar styling, so I force this to false. The fallback argument tells WordPress what to do if no menu is assigned to this location, and the default lists pages with the wrong HTML output. In this case I force it to use my own fallback function:
The fallback code has two main actions. It either simply outputs a Home link for visitors or if the user is logged in with the right privileges it outputs an extra link guiding them to the Menu customisation page, so that they can assign a menu to this location.
The final hurdle for compatibility is that Foundation Top Bar menu’s are often either at the top of a page, or stick to the top of the page when you scroll down. This means that it needs to work around the WordPress Admin Bar when users are logged in. There are two types of Top Bar menu, fixed and sticky, so I have created two functions which output the relevant CSS to avoid issues: