Responsive navigation - Top Bar in particular, is the most commonly used component in Foundation’s toolkit. Because it can create a useful desktop solution and a mobile friendly UI all with the same code, it can also be very complex. This is especially true when people try to heavily modify its structure.

Don’t worry. We’re here to help. This post will answer technical questions that have often been asked in the Forum about the Foundation Top Bar.

Changing Top Bar's breakpoint

Top-bar has it’s own independent breakpoint so you have more control over its behavior. This is really helpful in a variety of situations. For instance, you may have a menu with several list items that doesn't work well on smaller screens. In this case, having an independent breakpoint allows you to switch to the mobile menu while the content on the rest of the page remains the same. Your content will define your needs.

Avoid a cluttered menu that isn't suited for such a large number of items.

For the SCSS version - In the _settings.scss file, around line 1465, set your breakpoint width:

$topbar-breakpoint: 9999px; // Change to 9999px for always mobile layout
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;

You can d this in CSS versions - In foundation.css or app.css in a SCSS version change the widths at two places:

On line 4165

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:80.0625em)/";
  width: 80.0625em; }

On line 4505

@media only screen and (min-width:80.0625em) {

Now you can avoid the clutter and undesired wrapping:

Centering Top Bar’s buttons/dropdowns

As you may know, it’s simple to split the links on Top Bar to the left, right, or both. People often ask how to center the buttons and maybe still have a logo.

In your .top-bar-section, instead of having the ul.left, we’ll use a made up class called ul.center-buttons for this example.

.top-bar {
  text-align: center;
  position: relative;
}

ul.center-buttons {
  display: inline-block;
}

This was the easy part. Now we’ll add a logo, but we don’t what the logo to push the center buttons over.

<div class="logo">
  <a href="https://zurb.com/stickers/images/intro-foundation.png">
  <img src="http://zurb.com/stickers/images/intro-foundation.png"></a>
</div>

So to ensure they don’t take up space and un-center the buttons, we’ll use position: absolute; like this:

.logo {
  left: 5px;
  top: -4px;
  max-width: 2rem;
  position: absolute;
}

Of-course all this needs to be a media query to target larger screens. Here is the full code and example.

Adding a search box visible on both desktop and mobile

You can add a form, typically a search box, to Top Bar. By default it will be collapsed into the mobile menu on small screens, but what if you always want the mobile menu to show?

The .title-area of Top Bar is always visible on all screens. You can add the form as an li there:

<ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site<a></h1>
    </li>

    <li class="has-form">
      <div class="row collapse">
        <div class="large-8 small-9 columns">
          <input type="text" placeholder="Find Stuff">
        </div>
        <div class="large-4 small-3 columns">
          <a href="#" class="alert button expand">Search</a>
        </div>
      </div>
    </li>

And a bit of CSS to position it properly and control the width:

.has-form {

  position: absolute;
  top: 0;
  left: 6rem; // adjust distance from left here
  min-width: 14rem; // adjust form width here

  @media only screen and (max-width: 40em) {

    min-width: 10rem;
    top: 0.5rem;

    .button {
      height: 1.85rem;
    }
  }
}

Get the HTML and CSS here.

Top Bar with a centered logo and buttons

We’ll again use the .title-area for the mobile logo, and show it only on mobile:

 <ul class="title-area">
   <li class="name">
     <h1> <a class="logo show-for-small-only" href="#">
     <img src="http://placehold.it/50x50"></a></h1>
   </li>
   <li class="toggle-topbar menu-icon">
   <a href="#"><span>Menu</span></a></li>
 </ul>

And one to show on larger screens:

<section class="top-bar-section">
  <div class="logo-wrapper hide-for-small-only">
    <div class="logo">
      <img src="http://placehold.it/350x150">
    </div>
  </div>

With a little CSS to position the logo on larger screens, you get this.

Taller top-bar and social icons

You can easily make Top Bar taller by changing this variable in _settings.scss: $topbar-height: 90px; It will center all the child elements in the Top Bar. In our case, we’re doing something a bit more custom.

First, we’ll add a logo:

<ul class="title-area">
  <div class="logo">
    <a href="//path-to-your-img">
    <img src="//path-to-your-img" /></a>
  </div>

Then, we’ll add a social icon block. This can be added anywhere within Top Bar. We’re using Foundicons for this demo:

<ul class="social-icons">
    <li><a href=""><i class="fi-telephone"></i></a></li>
    <li><a href=""><i class="fi-social-linkedin"></i></a></li>
    <li><a href=""><i class="fi-social-twitter"></i></a></li>
    <li><a href=""><i class="fi-social-facebook"></i></a></li>
  </ul>

Now the CSS. We’ll make top-bar taller by adding to the media query only affecting larger screens:

@media only screen and (min-width: 40.063em) {
  .top-bar {
    height: 6rem;
    padding-top: 3rem;
    position: relative;
  }

The padding-top will push all the child elements down half the height of top-bar to make room for the social icons above.

Now, we’ll position the social icons above and to the right:

.social-icons {
  position: absolute;
  right: 0;
  top: -3rem;
}

You can check out the completed code here.

Even though Top Bar is a complex component, you can change it’s appearance with a bit of CSS and some of the insight we provided here. If you’re working through a specific customization, most of the time there is a simple solution a few clicks away on the Foundation Forum.

---