Students
Students get a Tuts+ subscription for just $45! Hurry limited offer.
Advertisement

How to Customize the Foundation 4 Top Bar

by
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: The Top Bar
Foundation for Beginners: Buttons and Dropdowns

Zurb's Foundation 4 features a brilliant top bar which has become almost symbolic of a Foundation site build. Today we're going to look at how you can implement it in a different way, placing it elsewhere on the page, giving you a custom and responsive horizontal navigation menu.


Getting Started

First up, we'll need the latest Foundation. Unzip and place all the files in your work or test directory. We will only be using index.html, making our own style.css in which we'll override the different classes of the Top Bar to make our custom navigation.

foundation-download

Also, download the background image provided above. We will be using this for the menu, so place that in your "img" folder. Have everything? Then fire up your favorite editor and let's get going!


Setting up the HTML Structure

Step 1: General Markup

The index file in your download comes with some preset HTML. You can leave everything as you find it in the header tag, and you can leave the script links (before the closing body tag) where they are. We need all that to make sure the Grid and the Top Bar actually work.

You can clear out the rest of the dummy content. We're going for a full width design here, nothing to complicated, just something to get a better idea of what we are working with.

Alright, let's set up the header, navigation, content and footer area and put in some dummy content for filling purposes. We will give each area a class of "full-width", then in each area we will place a div with a class="row", a div with a class="large-12" and class="columns". This sets up a basic grid structure.

Note: For more information on how the grid works, take a look at Foundation for Beginners: The Grid System

Step 2: Top Bar Markup

Before we get styling, we'll lay out the the essential HTML structure to make the Foundation Top Bar work properly. We need five basic elements to get the engine running:

  • nav with class="top-bar"
  • ul with class="title-area"
  • li with class="toggle-topbar" = to expand the menu in mobile layout
  • section with class="top-bar-section"
  • ul with class="left" and ul with class="right"

Now, let's set up these basics and implement the five elements.

Note: In this tutorial example we'll want to make a custom navigation menu, thus removing the title in it (which usually holds the logo, in text or image form). To do this we simply leave the li with class="name" in the ul with the class="title-area" empty.

Also, let's add some menu elements and a dropdown menu while we're at it. To include a dropdown add the class "has-dropdown" to the li element you want to contain the dropdown, then bring in a new ul with a class of "dropdown". To indicate the currently active page we can give our current menu item a class of "active" on the li element. We can leave the ul class="right" empty. Normally you would use this area to add a button or a search input form. For more information on the specifics of the top bar markup, take a look at Foundation for Beginners: The Top Bar.

Look at the following HTML, the comments explain how it's build up.

Step 3: Results So Far

Look at the results in your browser. We now set up a basic Foundation framework using the Top Bar to create a horizontal menu. In order to place it somewhere other than in the top of the browser is to simply put the nav class="top-bar" in a row and columns div.

When you re-size the browser you can see that the menu changes at the predefined break point.

The next step is to give it all some custom styling. We'll be focusing on how we can style the Top Bar and which classes are used for that.

foundation-4-custom-top-bar-html-layout

Setting up the CSS

Step 1: General Styling

If you haven't already, create a new CSS file, name it style.css and place it in the css folder of your Foundation download. Don't forget to include it in the header tag in your index file, referencing it beneath the foundation.css like so:

If you don't place it under the foundation.css it won't override the Top Bar classes.

Alright, let's first get some basic styling on the header, navigation, content and footer area. For the navigation area, we'll be using a background image, which you'll have previously downloaded. The general design is not that big of a deal, take a look at the CSS below. We add a full-width class to each area to make sure it fills the full width of the browser.

Step 2: Top Bar Styles

If you look at the results now, the menu still looks a bit out of place. That's because it still uses the default CSS. Let's fix it up!

There are a couple of CSS classes we need to address to get the desired results. First, we'll remove some of the black background on the .top-bar class and the section lists and change the height and line-height to 58px (height of the navigation-area). Check out the comments for further explanation.

We've removed the default black background from the nav class="top-bar", the section lists and the menu anchors. We adjust the height, line-height and padding and transform the text to uppercase to make it all fit with our custom design.

If you refresh your browser you'll see that it's starting to take shape. Let's continue on with the dropdowns, menu items, active and hover states. Take a look at the CSS below and again, read the commented text for explanation:

We've made several changes to our menu here. First off, we changed the default black background of the active menu item to a CSS gradient. Then we gave the non active menu items a resembeling hover state. To make the non-active menu items more clearly visible we change the text color to a dark gray. The changes made on .top-bar-section li:hover a will keep the state of the dropdown menu on hovered when your mouse moves over the dropdown items. To complete the CSS we gave the ul dropdown container a background fill and repositioned the default position of the dropdown arrow, because of our padding adjustments to the top-bar-section.

Step 3: Results So Far

Refresh your browser and take a look at the results so far. We are not quite done yet; we still need to make sure it all looks good when we resize our browsers screen size (or, for that matter, when we look at it on a smaller device). To make that happen, we'll add some Media Queries to our CSS file.

foundation-4-custom-top-bar-final-product

Setting up the Media Queries

Step 1: Media Queries

There are a couple of things that we need to adjust to make the menu work with our custom design when the screen size is being reduced. This mostly involves adding some padding, line-height, text colors and background colors. Take a look at the CSS below and look at the comments to get an explanation for each section.

Step 2: Enjoy Your Results

Save the file, refresh your browser and play around with the browser size. As you can see the menu fits in our design nicely.

foundation-4-custom-top-bar-final-product-responsive

Conclusion

So, that about wraps up our tutorial on how we can create a custom responsive menu using the Top Bar from the Foundation 4 framework. And remember, the menu doesn't have to be at the top of the page. Just wrap it in its own row and columns div, then you can practically place it anywhere you want!

Foundation is a great tool to swiftly develop responsive designs, and when you know your way around, you can pretty much shape it any way you want. Have fun!

Advertisement