How to combine top-bar and tab-bar in Foundation 5

Question

Is it possible to combine top-bar and tab-bar (off-canvas)?

This:

Becomes this when resize to mobile size:

But I want also to include there tab-bar(off canvas) so it becomes like this

I couldn't imagine how this could be done and I was trying to make my custom menu-icon and put it inside the top-bar but I had problems with positioning, elements were disappearing, margin/padding didn't work, position relative messed my style even more so I though to ask here maybe you have better idea.

Answer 1

there are 2 ways you can do it, first you can use the media queries or the other way is using the visibility class. For example in the topbar code add class="show-for-medium-up" which will make the topbar visible in medium screens and up but hide it in small.

<nav class="top-bar show-for-medium-up" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">........................

Then add the code for the offcanvas and add class="hide-for-medium-up"

<div class="off-canvas-wrap hide-for-medium-up">
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Foundation</h1>

By doing this, you will be able to implement diffrent styles depending on the screen size. For more information check out the visibility class