Menu icon Foundation
Top bar and off-canvas for medium

For my top bar. I have a fixed area with a few links. I'd like it for large screens to keep all my links in a horizontal position but as soon as it gets to medium to use the off-canvas format. Right now, when it goes to medium sized browser width, the links get pretty ugly when some go underneath each other.

When it's on mobile, it's fine as it's then in off-canvas mode.

So is there a way to set the top bar to only show large and off-canvas when it gets to medium and below in browser width?

top baroff-canvasmediumFoundation 5

For my top bar. I have a fixed area with a few links. I'd like it for large screens to keep all my links in a horizontal position but as soon as it gets to medium to use the off-canvas format. Right now, when it goes to medium sized browser width, the links get pretty ugly when some go underneath each other.

When it's on mobile, it's fine as it's then in off-canvas mode.

So is there a way to set the top bar to only show large and off-canvas when it gets to medium and below in browser width?


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey John!

Try using Foundation's visibility classes: http://foundation.zurb.com/docs/components/visibility.html

I've made a Pen for you to look at: http://codepen.io/winghouchan/pen/CzsGi

In this case your document structure should be as follows:

<body>
  <div class="off-canvas-wrap">
    <div class="inner-wrap">
      <nav class="top-bar hide-for-medium-down" data-topbar>
        <!-- Topbar stuff -->
      </nav>
      <nav class="tab-bar hide-for-large-up">
         <!-- Offcanvas Tabbar Stuff -->
      </nav>
      <aside class="right-off-canvas-menu hide-for-large-up">
        <!-- Offcanvas Stuff -->
      </aside>
      <section class="main-section">
        <!-- Main Content Stuff -->
      </section>
      <a class="exit-off-canvas hide-for-large-up"></a>
   </div>
</div>

.hide-for-medium-down has been applied to the topbar to hide it when it is medium and small.
.hide-for-large-up has been applied to all the components of Offcanvas, namely, nav.tab-bar, aside.off-canvas-menu and a.exit-off-canvas.

Wing-Hou Chan over 5 years ago

Hey John!

Try using Foundation's visibility classes: http://foundation.zurb.com/docs/components/visibility.html

I've made a Pen for you to look at: http://codepen.io/winghouchan/pen/CzsGi

In this case your document structure should be as follows:

<body>
  <div class="off-canvas-wrap">
    <div class="inner-wrap">
      <nav class="top-bar hide-for-medium-down" data-topbar>
        <!-- Topbar stuff -->
      </nav>
      <nav class="tab-bar hide-for-large-up">
         <!-- Offcanvas Tabbar Stuff -->
      </nav>
      <aside class="right-off-canvas-menu hide-for-large-up">
        <!-- Offcanvas Stuff -->
      </aside>
      <section class="main-section">
        <!-- Main Content Stuff -->
      </section>
      <a class="exit-off-canvas hide-for-large-up"></a>
   </div>
</div>

.hide-for-medium-down has been applied to the topbar to hide it when it is medium and small.
.hide-for-large-up has been applied to all the components of Offcanvas, namely, nav.tab-bar, aside.off-canvas-menu and a.exit-off-canvas.

John Yan over 5 years ago

Thank you very much!