Build a Top Bar Off-Canvas Navigation With Foundation 5

In an earlier tutorial, we learned How to Customize the Foundation 4 Top Bar using CSS. Since then ZURB have released Foundation 5; faster, leaner and more powerful than its predecessor. What’s also noticeable is that ZURB have brought back the Off Canvas functionality, which could be found in Foundation 3.

Today, we are going to combine the off-canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users.

Note: The functionality that we use here doesn't work for IE8 and lower. I've included a fix for IE9 in the resources listed at the end of the tutorial.

Requirements

In order to follow this tutorial you'll need some intermediate experience in the following:

Getting Started

Setting up the Environment

If you haven’t already, go ahead and set up Compass and Sass using the Foundation Sass documentation if you need direction.
If you have done that already, here’s the quick setup for creating a new
Foundation 5 project using the Command Prompt:

Ruby Command Prompt

Go to your preferred
directory

cd c:/user/your-working-environment

Use this command to
create your project

foundation new your-project

Go to your newly
created project file

cd your-project

And use this command to
get compass to watch and compile your Sass files

compass watch

If everything went successfully, your directory should look something like this:

Foundation 5 Project Directory

Only one thing remains and that is to create our style.scss. Do this by creating a new file in the scss folder and naming that file style.scss. We'll need this file later. If you have Compass running, your style.scss should already be compiled to astyle.cssfile in your stylesheets folder. Great, we have everything setup, let’s get started with coding our general HTML structure.

Setting up the HTML Structure

Step 1: General Markup

Open up your index.html and remove all of the content between the body tags, except for the scripts just before the </body>. We need them for all the Foundation functions to work. Secondly, go ahead and add the following line of code in the <head>, to make sure we load in our CSS file.

<link rel="stylesheet" href="stylesheets/style.css" />

With that set up, let's add a couple of sections and provide our page with some dummy content. We'll start with some basics, by adding a header, main, service, call to action, footer and copyright section.

Here we've added a header section with a logo, then a main section divided into the content section, three services and a call to action. Lastly there's a footer section with three columns and a copyright section. Straight-forward markup so far, let's get to the top bar!

Step 2: Top Bar Markup

We're going to wrap our Top Bar within a section with the class navigation-section, for styling purposes. We are also going to give this section another class: show-for-large-up. This makes sure that the Top Bar is only displayed for devices of a certain minimum width and higher. This is one of the many Visibility Classes that Foundation provides us with (you can read more about these in the Foundation component documentation). Now for the markup:

Note: Do include the data-topbar within your nav. This way we make sure the JavaScript for our Top Bar works properly (such as the dropdown, for example).

Step 3: Off-Canvas Markup

Our off-canvas menu will be hidden beyond the boundaries of the viewport. The moment we press menu, Offcanvas will slide in (from the left in our case) and move the page content to the right. In our setup we are going to excludethe header and the footer in this movement. Only the content area will be moved aside, leaving the header and footer in place.

Additionally, when scrolling down, our header (which may contain a logo and maybe other content), will appear fixed to the top of the page (Note: The page should contain enough content for this to work, because otherwise the footer section would also float above our Offcanvas menu). This means we have to "wrap" Off-canvas around our main content section. After the Top Bar navigationsection and before our main content section, put the following HTML:

Let's break it down. We've created two div elements; one with the class off-canvas-wrap and one with the class inner-wrap. The off-canvas-wrap hides our content until the menu button is pressed. Theinner wrap contains our nav menu bar, our left side off-canvas menu and the main content section. We've given the nav a class of hide-for-large-up, to make sure it only shows for medium and small set devices. By giving the aside a class of left-off-canvas-menu, we make sure that our off-canvas menu appears on the left of the screen. The menu items in our off-canvas menu are similar to the top bar. For off-canvas we use an unordered list with a class of off-canvas-list to make the magic happen.

All there's left to do is to give the user a way to close the Offcanvas menu. After that we close the off-canvas-wrap and the inner-wrap divs. Add this right after closing the main section.

Step 4: Results So Far

Let's open up our browser and locate the index.html file we've just edited. The result should look something like the screenshots below (try it, resize your browser!)

HTML Top BarHTML Offcanvas

Setting up Sass

Alright, we have a fully functioning top bar for desktop users and a nice, sleek off-canvas menu for users of smaller devices like tablets and phones. However, our page doesn't really look like a real web page yet, so let's go ahead and add some flavor to it.

Step 1: General Styling

First, we'll give our general sections (header, navigation, main, footer and copyright) some color. We'll also give our body a subtle background color and make a full-width class to have its width set to 100%. In the HTML we've added that full-width class to the different sections, to make sure they stretch to the borders of the browser. Take a look at the Sass below:

We gave our design a little more breathing room by adding some padding and made a full-width design by giving all the sections a background color and a minimum width of 100%. We also gave the menu items an uppercase text-transform.

Step 2: Top Bar Styles Using _settings.scss

To style our top bar, let's dive into the _settings.scss file. Depending on the code editor you're using, use the find option and type in "Topbar". Here you can find all the settings to alter the standard top bar. For this tutorial, we're going to use two different options; one to give our top bar a little more height and another to increase the font size a little bit. Uncomment and alter the following two settings:

$topbar-height: 65px;
$topbar-link-font-size: rem-calc(15);

Step 3: Off-Canvas Styles Using _setting.scss

We're also going to use the settings file to adjust our off-canvas menu. The standard off-canvas markup is pretty nice as it is, but let's make sure the nav section is the same height as our top bar's nav section. In adition to that, we will have to move the hamburger icona little bit, so it stays centered from the top. In the settings file, find and type "Off-canvas". Uncomment and alter the following two settings:

Step 4: Enjoy Your Results

Save the file, let compass compile your files and refresh your browser. Now our page has a little more juice and it's all powered by the great top bar and off-canvas! Your results should look something like this:

Sass Top BarSass Offcanavs

Conclusion

We've created a nice, responsive page using Foundation's top bar and off-canvas, adding a little Sass styling of our own to give it some juice and tweeking the page using the _settings.scss file.

Obviously, we can do a lot more with the _settings.scss then I just demonstrated. Go ahead and play around with the settings to see how easily you can customize the Foundation elements in your site, or try them out in this demo to further customize your top bar / off-canvas menu. Have fun!