Menu icon Foundation
Top-bar nav and Offset Canvas JS : Can you hide top-bar for Desktop and make the main content appear?

Hey all,

I just wondered if anyone has worked out a way to hide the Top -Bar nav for desktop but still keep the main content visible, whilst using the Off-canvas JS script?

I basically only want Off-canvas/top-bar nav to work when viewed on a mobile. The main content is wrapped in the off-canvas tags and is also over-ridden/hidden when you apply the "show-for-small-only" tag.

thanks to anyone who can help,

Hey all,

I just wondered if anyone has worked out a way to hide the Top -Bar nav for desktop but still keep the main content visible, whilst using the Off-canvas JS script?

I basically only want Off-canvas/top-bar nav to work when viewed on a mobile. The main content is wrapped in the off-canvas tags and is also over-ridden/hidden when you apply the "show-for-small-only" tag.

thanks to anyone who can help,

top-baroff-canvasvisibility

Hey all,

I just wondered if anyone has worked out a way to hide the Top -Bar nav for desktop but still keep the main content visible, whilst using the Off-canvas JS script?

I basically only want Off-canvas/top-bar nav to work when viewed on a mobile. The main content is wrapped in the off-canvas tags and is also over-ridden/hidden when you apply the "show-for-small-only" tag.

thanks to anyone who can help,

Hey all,

I just wondered if anyone has worked out a way to hide the Top -Bar nav for desktop but still keep the main content visible, whilst using the Off-canvas JS script?

I basically only want Off-canvas/top-bar nav to work when viewed on a mobile. The main content is wrapped in the off-canvas tags and is also over-ridden/hidden when you apply the "show-for-small-only" tag.

thanks to anyone who can help,

Rob Lampard over 3 years ago

Hi Finn, I believe you're after something like this :

This is how I've got it working on a project i'm working on - let me know if it helps at all?
Basically you apply the visibility classes to the tab-bar and top-bar elements and then you're content will be unaffected.

<div class="off-canvas-wrap">
            <div class="inner-wrap">
                <nav class="tab-bar show-for-small">
                    <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">Menu</h1>
                    </section>
                </nav>

                <aside class="left-off-canvas-menu">
                    <ul class="off-canvas-list">
                        <li><label class="first">Title</label></li>
                        <li><a href="index.html">Home</a></li>
                    </ul>

                    <ul class="off-canvas-list">
                        <li><label>Example</label></li>
                        <li><a href="#">Example 1</a></li>
                        <li><a href="#">Exmaple 2</a></li>
                        <li><a href="#">Example 3</a></li>
                        <li><a href="#">Example 4</a></li>
                    </ul>

                </aside>

                <section class="main-section">
                    <!-- content goes here -->
            <!-- TOP BAR -->
            <nav class="top-bar show-for-medium-up" data-topbar>
              <ul class="title-area">
                <li class="name">
                  <a href="index.html">Home</a>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
              </ul>
              <section class="top-bar-section">
                <ul class="right">
                  <li><a href="#">Trade Buyers</a></li>
                  <li class="has-dropdown"><a href="#">Categories</a>
                    <ul class="dropdown">
                      <li><a href="#">Category 1</a></li>
                      <li><a href="#">Category 2</a></li>
                      <li><a href="#">Category 3</a></li>
                      <li><a href="#">Category 4</a></li>
                    </ul>
                  </li>
                  <li><a href="#">About Us</a></li>
                  <li><a href="#">Contact Us</a></li>
                  <li><a href="#">News</a></li>
                </ul>
              </section>
            </nav>
            <!-- End of TOP BAR -->
      </div>
    </div>