Foundation Top Bar Off-Canvas Hybrid

How to combine Foundation’s Top Bar drop down with off-Canvas menu component


Foundation’s top bar and off canvas can be used together but requires creating two separate menus. Two nav components with the same menu items is redundant and bloats code. This can affect SEO and performance of websites with complex navigation.

This tutorial provides an simple solution for converting Off Canvas and Top bar into one nav menu. Open the demo to see an example of a hybrid nav that uses only one menu list.

View Live Demo

foundation-topbar-offcanvas

Off Canvas Base

Start by building a basic offCanvas nav. Using Offcanvas as the default menu follows “Mobile First” approach since it works best with small devices.

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
        <nav class="tab-bar">
            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>

            <section class="middle tab-bar-section">
                <h1 class="title">Foundation</h1>
            </section>
            <section class="right-small"> <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a> 
            </section>
        </nav>
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li>
                    <label>Foundation</label>
                </li>
                <li><a href="#">Item 1</a>
                </li>
                <li><a href="#">Item 2</a>
                </li>
                <li><a href="#">Item 3</a>
                </li>
                <li><a href="#">Item 4</a>
                </li>
                <li><a href="#">Item 5</a>
                </li>
            </ul>
        </aside>
        <aside class="right-off-canvas-menu">
            <ul class="off-canvas-list">
                <li>
                    <label>Foundation</label>
                </li>
                <li><a href="#">Link 1</a>
                </li>
                <li><a href="#">Link 2</a>
                </li>
                <li><a href="#">Link 3</a>
                </li>
                <li><a href="#">Link 4</a>
                </li>
                <li><a href="#">Link 5</a>
                </li>
            </ul>
        </aside>
        <section class="main-section">
		<div class="row">
			<div class="large-12 columns">
            <h3>Foundation Top Bar/Off-Canvass Hybrid Navigation</h3>
	<p>Etiam dictum lectus est, nec hendrerit eros rhoncus eu. Proin condimentum nibh ante, a sagittis velit luctus a. Quisque quis risus et ante adipiscing porttitor. Etiam mi quam, eleifend nec venenatis ut, accumsan eget risus. Etiam lobortis, massa quis sagittis varius, neque nulla rutrum risus, vel imperdiet sem tortor eget dolor. Phasellus suscipit mi ac varius posuere. Mauris gravida id dui sit amet ullamcorper. Nullam gravida nibh et mi iaculis, a varius dui varius.</p>
		</div>
		</div>
        </section>
        <a class="exit-off-canvas"></a>
    </div>
</div>

Hybrid Bar Customization

The off Canvas markup needs to be changed in order for it to work like a Tab Bar on larger devices.

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
        <div class="hybrid-bar">
            <nav class="tab-bar">
                <div class="title-area">
                    <div class="name">
                        <h1><a href="#">My Site</a></h1> 
                    </div>
                </div>
                <section class="right-small show-for-small">
                    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>
            </nav>
            <aside class="right-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li class="show-for-small">
                        <label>Foundation</label>
                    </li>
                    <li><a href="#">Link 1</a>
                    </li>
                    <li><a href="#">Link 2</a>
                    </li>
                    <li><a href="#">Link 3</a>
                    </li>
                    <li><a href="#">Link 4</a>
                    </li>
                    <li><a href="#">Link 5</a>
                    </li>
                </ul>
            </aside>
        </div>
        <div class="row">
            <div class="large-12 columns">
                <h3>Foundation Top Bar/Off-Canvass Hybrid Navigation</h3>
                <p>Etiam dictum lectus est, nec hendrerit eros rhoncus eu. Proin condimentum nibh ante, a sagittis velit luctus a. Quisque quis risus et ante adipiscing porttitor. Etiam mi quam, eleifend nec venenatis ut, accumsan eget risus. Etiam lobortis,
                    massa quis sagittis varius, neque nulla rutrum risus, vel imperdiet sem tortor eget dolor. Phasellus suscipit mi ac varius posuere. Mauris gravida id dui sit amet ullamcorper. Nullam gravida nibh et mi iaculis, a varius dui varius.</p>
            </div>
        </div>
        <a class="exit-off-canvas"></a>
    </div>
</div>

Top Bar Styles

Copy css to .tab-bar and off-canvas list to make it look like a .top-bar. Media queries are required to make sure it doesn’t show on small screens.

.hybrid-bar .tab-bar {
	height: 2.8125rem;
	}
	
	.hybrid-bar .name a	 {
color: #FFFFFF;
    display: block;
    font-weight: normal;
    padding: 0 15px;
	}
@media only screen and (min-width: 40.063em) {
.contain-to-grid .hybrid-bar {
    max-width: 62.5rem;
	margin: 0 auto;
    margin-bottom: 0;
}
.hybrid-bar {
background: none repeat scroll 0 0 #333333;
    overflow: hidden;
	}
.hybrid-bar .tab-bar {
	display: inline-block;
	}
	.hybrid-bar .right-off-canvas-menu {
	display: inline;
	width: auto;
  height: auto !important;
  top: auto;
  bottom: auto;
  position: relative; }

.hybrid-bar ul.off-canvas-list {
  float: right;
  list-style-type: none;
  padding: 0;
  margin: 0; }
  .hybrid-bar ul.off-canvas-list li label {
    padding: 0.3rem 0.9375rem;
    color: #999999;
    text-transform: uppercase;
    font-weight: bold;
    background: #444444;
    border-top: 1px solid #5e5e5e;
    border-bottom: none;
    margin: 0; }
  .hybrid-bar ul.off-canvas-list li a {
  font-size: 16px;
      border-left: 1px solid #4D4D4D;
    display: block;
    width: 100%;
    color: white;
    padding: 12px 0 12px 0;
    padding-left: 15px;
	padding-right: 15px;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 0.8125rem;
    font-weight: normal;
    text-transform: none;
    background: #333333; }
    .hybrid-bar ul.off-canvas-list li a:hover {
      background: #242424; }
	.hybrid-bar ul.off-canvas-list li {
        float: left; }
}

.hybrid-bar ul.off-canvas-list li.btn-rfq {
      background: #333333;
      padding: 0 15px;
      height: 45px; }
	  
.hybrid-bar ul.off-canvas-list li.btn-rfq > a {
	position: relative;
	top: 7px;
      background-color: #008cba;
      border-color: #007095;
    padding-top: 0.45rem;
	padding-bottom: 0.35rem;
	line-height: normal;
      color: white;}
  
  

.hybrid-bar ul.off-canvas-list li.btn-rfq > a:hover, .hybrid-bar ul.off-canvas-list li.btn-rfq > a:focus {
        background-color: #007095; }
      .hybrid-bar ul.off-canvas-list li.btn-rfq > a:hover, .hybrid-bar ul.off-canvas-list li.btn-rfq > a:focus {
        color: white; }

Combining Top Bar and Off-Canvas menus into a single component can help optimize your site’s navigation and make it easier to maintain. It’s easy to create a hybrid Foundation Top bar. With a little customization, you can have the best of both worlds.

Share this post on your favorite social network by clicking a button below. Leave a comment for feedback.

Like, Tweet and Share!

6 Responses to “Foundation Top Bar Off-Canvas Hybrid”

  1. vanoode

    Great article :)

    Reply
  2. Ilia luk

    Looks promising, gonna try it now, I’ll come back soon with the results :)

    Reply
  3. Ricky

    How can one make the menu bar stick when on mobile?

    Reply
  4. Ziles

    I had a problem with the hover color not displaying on Safari and Chrome for Mac and PC. I discovered the problem was that the visibility was hidden by this line of code in the foundation.css:

    .off-canvas-wrap, .inner-wrap, nav.tab-bar, .left-off-canvas-menu, .left-off-canvas-menu *, .right-off-canvas-menu, .move-right a.exit-off-canvas, .move-left a.exit-off-canvas {
    -webkit-backface-visibility: hidden; }

    So I commented it out, and things were good again. Not sure if anyone else will run into this problem, or has already. Either way, I wanted to post.

    Reply
  5. Tiago

    Does this work with dropdowns?

    Reply
  6. alex

    Hi,
    Works perfectly. Just a question: how can I make the navigation (both on mobile & large screen) fixed to the top? I tried position:fixed on div class=”hybrid bar” but It doesn’t work…

    Reply

Leave a Reply

Published Last updated