The Top Bar is among Foundation’s most popular pre-built components — and certainly its most complicated. We created it to alleviate the trouble of building complex navigation for both mobile and widescreen browsers. The Top Bar is a powerful tool. But with power comes responsibility, or at least confusion about some of its inner workings.

Don’t panic. We’re here to help. This post will answer technical questions we’ve often been asked about the Foundation Top Bar.

Download and add the code to your project

Hang on — you’re here because you’re already using the Foundation Top Bar, right? If not, download the minimum code, specifically the Grid and Top Bar add-on. You can use the index.html file that comes with Foundation to continue this tutorial.

Make sub-nav items clickable

On desktop browsers, getting to sub-menus is easy: Just hover over one dropdown item to see items underneath. The Top Bar can even make those items clickable to pages in the site — but not on mobile devices, because the effect requires a mouse hover.

Solution: Add this data option to the Top Bar’s root <nav> element:

<nav class="top-bar" data-options="mobile_show_parent_link: true">

Above: The mobile_show_parent_link data option gives mobile users something to tap and allow them to tap on the parent link.

Make the Top Bar disappear

The Top Bar is great at showing many links. But what if you want to hide them?

When users tap through navigation in mobile devices, the Top Bar tends to hide page content. In some versions users have to click the “menu” link again to hide the drop-down navigation.

Solution: You can make the Top Bar hide its links with Smooth Scroll, a third-party jQuery plugin, and this code:

$('a').smoothScroll({
  beforeScroll: function() {
    Foundation.lib.topbar.toggle($('.top-bar'));
  }
});

Change the mobile icon

When viewed in smaller screens, the Top Bar collapses to a mobile-friendly design that includes a familiar triple bar navigation icon. It’s white by default, but you can change its color, use a graphic instead — or remove the icon altogether.

Solution: The “hamburger” icon is generated with the CSS3 box-shadow property. In your CSS, override -webkit-box-shadow and -webkit-box-shadow these selectors:

.top-bar .toggle-topbar.menu-icon a span { your code here }
.top-bar.expanded .toggle-topbar a span { your code here }

How do I change the Top Bar’s breakpoint?

The point at which the Top Bar changes from its widescreen-friendly dropdown mode to a compressed, mobile-optimized mode is set to 58.75em. It’s possible to change the Top Bar’s default with two values in CSS.

Solution: Search for .top-bar-js-breakpoint and @media only screen and (min-width: 58.75em), and change their values accordingly. For example, if you want the breakpoint to be 640px:

.top-bar-js-breakpoint {
  width: 640px !important;
  visibility: hidden;
}

@media only screen and (min-width: 640px) 

How can I add a search form to the top bar?

A common convention places a handy search bar inside the navigation menu. But forms, which default to display: block, cause odd spacing in the Top Bar.

Solution: Place the search form inside of one list item, and give that <li> a “has-form” class: <li class="has-form"><form>…</form></li>

---