Menu icon Foundation
Using top-bar with tab-bar + off-canvas

Hi, I'm trying to build the top bar navigation used by Zurb on their own updated site: a top-bar component for larger screens which then gets hidden and replaced by a tab-bar/off-canvas combo on small screens (the standalone top-bar component seems too clunky for me on mobile--much prefer the smoother transitions of the off-canvas menu--as, apparently, does Zurb).

I'm doing this exactly as Zurb seems to be: using the "hide-for-small" visualization class for the top-bar nav element and "show-for-small" class for the tab-bar nav element.

I have one problem I can't seem to solve: as the screen size is reduced, the top-bar right section (essentially my main nav links) disappear at about 1000px, well before the "small" screen width. So, there's a range of screen widths (~600-1000px) for which I have no top-bar right section.

Looking at it in Chome dev tools, it's apparent that the links in the top-bar right section begin stacking (but are not visible) under the top-bar at about 1000px, which seems odd (especially since this behavior isn't apparent on the Zurb site).

Any help would be appreciated. My simple HTML file is included.

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Foundation | Welcome</title>
	<link rel="stylesheet" href="css/foundation.css" />
	<script src="js/modernizr.js"></script>
</head>
<body>
	
	<div class="off-canvas-wrap">
		<div class="inner-wrap">
		
			<aside class="left-off-canvas-menu">
				<ul class="off-canvas-list">
					<li><label class="first">Parks & Tolpa</label></li>
					<li><a href="#">Home</a></li>
					<li><a href="#">Work</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>	
			</aside>
			
			<nav class="tab-bar show-for-small">
				<a class="left-off-canvas-toggle menu-icon">
					<span>Menu</span>
				</a>
			</nav>
			
			<!--use Foundation top-bar element for all but small screens-->
			<nav class="top-bar hide-for-small" data-topbar>
				<ul class="title-area">
					<li class="name">
						<h1><a href="#">Home</a></h1>
					</li>
				</ul>
			
				<section class="top-bar-section">
					<ul class="right">
						<li class="divider"></li>
						<li class="has-dropdown">
							<a href="#" class="">Item 1</a>
							<ul class="dropdown">
								<li><a href="#">Sub Item 1</a></li>
								<li><a href="#">Sub Item 2</a></li>
								<li><a href="#">Sub Item 3</a></li>
							</ul>
						</li>
						<li class="divider"></li>
						<li class="has-dropdown">
							<a href="#" class="">Item 2</a>
							<ul class="dropdown">
								<li><a href="#">Sub Item 1</a></li>
								<li><a href="#">Sub Item 2</a></li>
								<li><a href="#">Sub Item 3</a></li>
							</ul>
						</li>
						<li class="divider"></li>
						<li>
							<a href="#" class="">Item 3</a>
						</li>
						<li class="divider"></li>
						<li>
							<a href="#" class="">Item 4</a>
						</li>
					</ul>
				</section>
			</nav>						
							
			<a class="exit-off-canvas" href="#"></a>
	
			<div class="row">
				<div class="large-12 columns">
					<h1>Page content here</h1>
				</div>
			</div>
					
		</div><!--off-canvas inner-->
	</div><!--off-canvas wrap-->
	
	<script src="js/jquery.js"></script>
	<script src="js/foundation.min.js"></script>
	<script>
		$(document).foundation();
	</script>
	
</body>
</html>

            

         

top-bartab-baroff-canvas

Hi, I'm trying to build the top bar navigation used by Zurb on their own updated site: a top-bar component for larger screens which then gets hidden and replaced by a tab-bar/off-canvas combo on small screens (the standalone top-bar component seems too clunky for me on mobile--much prefer the smoother transitions of the off-canvas menu--as, apparently, does Zurb).

I'm doing this exactly as Zurb seems to be: using the "hide-for-small" visualization class for the top-bar nav element and "show-for-small" class for the tab-bar nav element.

I have one problem I can't seem to solve: as the screen size is reduced, the top-bar right section (essentially my main nav links) disappear at about 1000px, well before the "small" screen width. So, there's a range of screen widths (~600-1000px) for which I have no top-bar right section.

Looking at it in Chome dev tools, it's apparent that the links in the top-bar right section begin stacking (but are not visible) under the top-bar at about 1000px, which seems odd (especially since this behavior isn't apparent on the Zurb site).

Any help would be appreciated. My simple HTML file is included.

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Foundation | Welcome</title>
	<link rel="stylesheet" href="css/foundation.css" />
	<script src="js/modernizr.js"></script>
</head>
<body>
	
	<div class="off-canvas-wrap">
		<div class="inner-wrap">
		
			<aside class="left-off-canvas-menu">
				<ul class="off-canvas-list">
					<li><label class="first">Parks & Tolpa</label></li>
					<li><a href="#">Home</a></li>
					<li><a href="#">Work</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>	
			</aside>
			
			<nav class="tab-bar show-for-small">
				<a class="left-off-canvas-toggle menu-icon">
					<span>Menu</span>
				</a>
			</nav>
			
			<!--use Foundation top-bar element for all but small screens-->
			<nav class="top-bar hide-for-small" data-topbar>
				<ul class="title-area">
					<li class="name">
						<h1><a href="#">Home</a></h1>
					</li>
				</ul>
			
				<section class="top-bar-section">
					<ul class="right">
						<li class="divider"></li>
						<li class="has-dropdown">
							<a href="#" class="">Item 1</a>
							<ul class="dropdown">
								<li><a href="#">Sub Item 1</a></li>
								<li><a href="#">Sub Item 2</a></li>
								<li><a href="#">Sub Item 3</a></li>
							</ul>
						</li>
						<li class="divider"></li>
						<li class="has-dropdown">
							<a href="#" class="">Item 2</a>
							<ul class="dropdown">
								<li><a href="#">Sub Item 1</a></li>
								<li><a href="#">Sub Item 2</a></li>
								<li><a href="#">Sub Item 3</a></li>
							</ul>
						</li>
						<li class="divider"></li>
						<li>
							<a href="#" class="">Item 3</a>
						</li>
						<li class="divider"></li>
						<li>
							<a href="#" class="">Item 4</a>
						</li>
					</ul>
				</section>
			</nav>						
							
			<a class="exit-off-canvas" href="#"></a>
	
			<div class="row">
				<div class="large-12 columns">
					<h1>Page content here</h1>
				</div>
			</div>
					
		</div><!--off-canvas inner-->
	</div><!--off-canvas wrap-->
	
	<script src="js/jquery.js"></script>
	<script src="js/foundation.min.js"></script>
	<script>
		$(document).foundation();
	</script>
	
</body>
</html>

            

         
Peter Jagusch about 4 years ago

Hey, just today I tried Foundation for the first time and I ran into the same ploblem : disappearing menu when scalind down at about 1000px...

Adding the .js file for the topbar solved this problem.

    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation/foundation.topbar.js"></script>
    <script>
      $(document).foundation();
    </script>

Xandros about 4 years ago

The breakpoint for the top-bar is 58.75 em according to

http://foundation.zurb.com/develop/download.html

however the small- range starts at 40em ...

you may need to check and update this in your sass or css files

Peter Graff about 4 years ago

Thanks, I'll give that a look.

It's surprising to me that Zurb hasn't implemented a single nav component with the behavior of the top-bar/tab-bar/off-canvas hybrid they're currently using on their own site. Such a cleaner and more refined UI than the top-bar alone. Maybe in the next update...

Xandros about 4 years ago

What hybrid, on what page?

on the foundation pages it's the same as you are trying to do.

GertG about 4 years ago

@Peter: Seriously. There are a few concepts that need to be more universal, like the topbar and treating .row.collapse like a button group.

Adrian K about 4 years ago

try adding ' Hide-for-large' class instead, had same issue seems to be working fine for me now.

Eric Bishard almost 4 years ago

Off canvas was just a playground add-on in F4, so the fact that it is baked in is a huge plus in F5. This makes it a lot more accessible for those of use using ASP.Net or Rails and a package manager/asset pipeline type installation. Top-bar was their original navigation element and completely separate from off canvas. While I do agree a hybrid style nav using the best of both features is a great idea We should be happy that it was included in the framework. Just because they do something on their site doesn't mean that it should be default. You have to keep in mind the fact that most people use this functionality separately, consistency with naming and function is key when jumping from one version to the next so that things don't break for those not using these different elements together, but separately. Plus pigeon holing off canvas as just a navigational item is limiting what it can do. You can use it for flying in content from off page as well. Not saying that you are not grateful, just trying to give some insight as to why they are better on their own.

kappicraig almost 4 years ago

@Eric Bishard Cheers, nice post. I never considered using the off canvas for something else. The possibilities are quite good.

Andrew Brown almost 4 years ago

Does anyone have any insight, however, on how to use them together - in the way that they have on their site?

Henrique d'Almeida almost 4 years ago

Ok... I started foundation today (thumbs up) and wanted to do this.
Here is how I did:

<div class="row off-canvas-wrap">
    <div class="inner-wrap">
        <aside class="right-off-canvas-menu">
            <!-- offCanvas links -->
        </aside>
        <!-- all the site information continues normal. Starts topbar -->
        <nav class="top-bar has-form has-dropdown" data-topbar>        
            <section class="top-bar-section">
                <ul class="title-area">
                    <li class="name"><!-- Leave this empty if you want --></li>
                    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>
                <ul class="right">
                    <li>
                        <!-- here's where the magic happens -->
                        <a class="right-off-canvas-toggle hide-for-small">OffCanvas Menu</a>
                    </li>
                </ul>
            </section>
        </nav>
        ...
    </div>
</div>

It worked just fine to me because I want offCanvas to cover the entire site. If you don´t need that, you can wrap only the content you want and the offCanvas will take the proper height.
Although it's really hard to believe they didn't share hybrid offCanvas/topBar, all of us need to stay focused to one little detail:
Coding isn't always about copying, sometimes you need to work a way around, test and eventually accomplish.

Oh! And sorry for spelling mistakes, english isn't my native language.

Andrew Jones almost 4 years ago

I found this to work:

<nav class="top-bar hide-for-medium hide-for-small" data-topbar>
<!-- tell .top-bar to not show for medium and small sizes -->

<nav class="tab-bar hide-for-large">
<!-- tell .tab-bar show except for large size -->

Eric Bishard almost 4 years ago

@PeterGraff SO I implemented your navigation-Hybrid. I changed it up a bit, also added [Contain to Grid] wrapped around the Top-Bar section since I use the standard grid foundation provides. Nice work!

Joseph R Gallegos almost 4 years ago

@EricBishard I am trying to do the exact same thing. Could you post your code or a link? I I think a lot of us on here want to use the top-bar and off-canvas just like on the foundation page that Peter mentioned. I have been working with it for a few days with limited success. You can see my latest attempts at dr-goop.com/a and then b, c, d, e....
Regards,
Joe

Dberz almost 4 years ago

Hey Guys -

Great info here. I was able to implement the hybrid. However, I cannot make the top-bar STICKY within this configuration.

The documented method of wrapping the top-bar in a div with class "sticky" does not seem to work when the top-bar is nested within the off-canvas menu.

...

Any ideas?

Giac

Paul Walker over 3 years ago

It does seem a little strange to me that a whole new "tab" bar type navigation element was made for off canvas rather than just making "top" bar flexible enough for integration with off canvas. I see a lot of that in foundation, which can be frustrating to a degree. Another example is the fact that side-nav has an "active" class while that of of the off canvas side nav does not. Again, it seems as if a whole new component has been built for off canvas rather than making the perfectly pleasing side-nav component the inner side nav component for off canvas.

Would love for zurb to recognize these design duplications/missed opportunities and put forth an engineering effort to de-dupe, which may be difficult, but I think would end up greatly simplifying for consumers.

I do love Foundation's principle of providing base components vs Bootstrap's all-in-one generic approach. It's just that I think that principle can be furthered by focusing on de-duping, re-using, and -- thereby -- simplifying in the end.

Caleb Serna over 3 years ago

I tried the technique from the Foundation site in the beginning as well. I've made some customizations to combine topbar and offcanvas into one menu like this:

<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>

I think it's more elegant this way rather than having two components to work with.

You can check the demo and instructions at
http://calebserna.com/foundation-top-bar-offcanvas-hybrid/

Jesse Matlock over 3 years ago

Check your visibility classes.. looks like you might want to use hide-for-small-only and/or show-for-medium-up or down..

http://foundation.zurb.com/docs/components/visibility.html

Right now, you're using a deprecated visibility class ;O

Wing-Hou Chan over 3 years ago

Hey Jesse!

I suppose this a a very old thread. Posted Nov 22nd 2013, so no-one will update their posts to reflect changes in later version of Foundation.

Your post got me thinking about having a page in the FAQ for implementation page in the Docs, so thank you!

Phoenix Kawlay about 2 years ago

Could the original poster please share the code that eventually worked, despite this arcane hoops one has to jump through to get this very basic setup going in Foundation?

Top bar + off canvas. This is the default expectation in a responsive world. Yet, with Foundation we have to tear our hair out to get this simple thing going.

Rafi Benkual about 2 years ago

We made a demo of this that's posted on the Get Started page: http://codepen.io/ZURBFoundation/pen/vKwHa

We're using the same setup on the Foundation site. You can use top-bar for large screens and off-canvas for small. Visibility classes can help you show/hide them.