Menu icon Foundation

My Posts



My Comments

Eric Warncke commented on Scott Anderson's post almost 6 years

You can add in a hover=false in tab-bar.

Eric Warncke commented on Twitch6000's post almost 6 years

Hey homeslice,

There are 3 different types of navigations in Foundation 5.

Magellan
http://foundation.zurb.com/docs/components/magellan.html

Off-canvas
http://foundation.zurb.com/docs/components/offcanvas.html

Top-bar
http://foundation.zurb.com/docs/components/topbar.html

I personally like Topbar the best, because it automatically takes your navigation and turns it into an off-canvas menu for mobile. Its like a 2 in 1. You should read the documentation and try it out. I have been trying to get a dropdown button to appear in Top-bar when it is shrunk down to the mobile size, as well as the default drop off-canvas menu (basically have the default mobile menu AND an additional button with a dropdown next to it). I haven't figured out how to do that yet, but if you figure it out be sure to let me know how you did it.

Eric Warncke commented on King Harrison's post almost 6 years

Can you paste your code or link to your development site? Also, are you mixing Foundation 4 parts in with Foundation 5? Are you sure everything is completely up to date?

Eric Warncke commented on King Harrison's post almost 6 years

Hey Harrison,

I'm not sure about the first question...I just posted a new thread with a similar problem. I'll let you know if I solve that tomorrow or the next day.

Your second question - You need to put your entire website inside < div class="off-canvas-wrap" > and
< div class="inner-wrap" >. Make sure the very last code before the end of your body is < a class="exit-off-canvas" > < /a > < /div > < /div >. Basically, you are telling it to close the off canvas at the very bottom of the site, then close your off-canvas-wrap and inner-wrap tags.

You can see the source code on any of the Zurb pages to see how they did it. They use Top-bar for their large screen navigation, then off-canvas for their mobile and touch version.

<div class="off-canvas-wrap">
  <div class="inner-wrap">

    <a class="left-off-canvas-toggle" >Menu</a> 

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
        <ul>
          <li><a href="#">Item 1</a></li>
        </ul>
    </aside>

    <!-- main content goes here -->

  <a class="exit-off-canvas"></a>

  </div>
</div>

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Scott Anderson's post almost 6 years

You can add in a hover=false in tab-bar.

You commented on Twitch6000's post almost 6 years

Hey homeslice,

There are 3 different types of navigations in Foundation 5.

Magellan
http://foundation.zurb.com/docs/components/magellan.html

Off-canvas
http://foundation.zurb.com/docs/components/offcanvas.html

Top-bar
http://foundation.zurb.com/docs/components/topbar.html

I personally like Topbar the best, because it automatically takes your navigation and turns it into an off-canvas menu for mobile. Its like a 2 in 1. You should read the documentation and try it out. I have been trying to get a dropdown button to appear in Top-bar when it is shrunk down to the mobile size, as well as the default drop off-canvas menu (basically have the default mobile menu AND an additional button with a dropdown next to it). I haven't figured out how to do that yet, but if you figure it out be sure to let me know how you did it.

You commented on King Harrison's post almost 6 years

Can you paste your code or link to your development site? Also, are you mixing Foundation 4 parts in with Foundation 5? Are you sure everything is completely up to date?

You commented on King Harrison's post almost 6 years

Hey Harrison,

I'm not sure about the first question...I just posted a new thread with a similar problem. I'll let you know if I solve that tomorrow or the next day.

Your second question - You need to put your entire website inside < div class="off-canvas-wrap" > and
< div class="inner-wrap" >. Make sure the very last code before the end of your body is < a class="exit-off-canvas" > < /a > < /div > < /div >. Basically, you are telling it to close the off canvas at the very bottom of the site, then close your off-canvas-wrap and inner-wrap tags.

You can see the source code on any of the Zurb pages to see how they did it. They use Top-bar for their large screen navigation, then off-canvas for their mobile and touch version.

<div class="off-canvas-wrap">
  <div class="inner-wrap">

    <a class="left-off-canvas-toggle" >Menu</a> 

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
        <ul>
          <li><a href="#">Item 1</a></li>
        </ul>
    </aside>

    <!-- main content goes here -->

  <a class="exit-off-canvas"></a>

  </div>
</div>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content