Menu icon Foundation
Foundation 5 Menu(Top Bar) toggle not working in Small screens

Hello, I'm very happy with new foundation.
When I try to implement Top Bar this working well in Medium screens, and Large screens.
But in small screen the menu toggle not working, I check the browser console is fine, this is my javascript assets :

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

<!-- OR -->

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

When I try to load javascript in doc/demo page, the toggle it's working for all screen size

<script src="js/vendor/jquery.js"></script>
<script src="http://foundation.zurb.com/docs/assets/js/all.js"></script>
<script>$(document).foundation();</script>

Are you look the same thing, or I made a mistake ?

foundation5menutoggle

Hello, I'm very happy with new foundation.
When I try to implement Top Bar this working well in Medium screens, and Large screens.
But in small screen the menu toggle not working, I check the browser console is fine, this is my javascript assets :

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

<!-- OR -->

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

When I try to load javascript in doc/demo page, the toggle it's working for all screen size

<script src="js/vendor/jquery.js"></script>
<script src="http://foundation.zurb.com/docs/assets/js/all.js"></script>
<script>$(document).foundation();</script>

Are you look the same thing, or I made a mistake ?


Rafi Benkual gave the most helpful answer for this post
Rafi Benkual almost 6 years ago

This issue has been resolved in master and will be released in 5.0.1. Or, if you are using the Foundation CLI, you can run foundation update.

This post has been closed. No new replies can be added.

Michael Lee almost 6 years ago

I have been running into the same problem. Haven't found a fix yet.

Steven Sun almost 6 years ago

Even the top-bar on their official templates is not working..........

Feather Light almost 6 years ago

Stay tuned at https://github.com/zurb/foundation/issues/3588 :(
So please keep your eyes on that issue...

Simon almost 6 years ago

I fixed my top-bar by commenting out line 34 in foundation.js

Simon almost 6 years ago

After reading https://github.com/zurb/foundation/issues/3614
Moving foundation.js to thethe bottom of BODY works for me too.

Erik Smith almost 6 years ago

I'm new to Foundation, but it looks to me like this was claimed to be fixed as of 5.0.1:
https://github.com/zurb/foundation/issues/3588

I'm currently using 5.0.2 and I'm still experiencing the issue. Is it just me?

Chris Tarwater almost 6 years ago

Not just you, I'm on 5.02 and run into the same issue with Chrome/Firefox on a linux box.

Lynda Spangler almost 6 years ago

I had issue with the top bar and realized I was missing data-topbar

<nav class="top-bar" data-topbar>

Erik Smith almost 6 years ago

I'm using the markup straight from the documentation, which includes data-topbar:
http://foundation.zurb.com/docs/components/topbar.html

On 5.0.2 and it doesn't properly handle small screens. All components except for the title disappear when the width is decreased sufficiently, and no menu option appears. It works using the examples on the documentation page, but not in my implementation. It's either somehow my inexperience with Foundation or the bug discussed in this thread hasn't been fixed.

Chris Tarwater almost 6 years ago

Thanks Lynda, you're right (in my case at least).

Erik Smith almost 6 years ago

The example markup from Foundation 4's documentation fixes the issue I was experiencing, even when using it with 5.0.2:
http://foundation.zurb.com/docs/v/4.3.2/components/top-bar.html

The example markup from Foundation 5's documentation combined with 5.0.2. does not work properly for me:
http://foundation.zurb.com/docs/components/topbar.html

So I'm assuming it's an error in the documentation. If you try a new blank install and use only the documentation provided for Foundation 5, I suspect you'd have a similar experience.

Alex almost 6 years ago

I'm also experiencing problems with the top nav bar. It expands and works fine for medium screen sizes, but, doesn't expand for small screen sizes.

Alex almost 6 years ago

Ah... just downloaded 5.0.2 a few minutes ago, and the top nav bar works fine for small screens. :)

Feather Light almost 6 years ago

Yes, it's working fine in 5.0.2
For Erik Smith. it's still not working ? Please check your foundation version or your code
If still not working, you can add your code, so we can help you _^

Erik Smith almost 6 years ago

@Feather - see my last post. I got it working by using Foundation 4's documentation. Shouldn't this be present in the markup example in Foundation 5's documentation?

<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>

Feather Light almost 6 years ago

Oh, I see Erik Smith :)
I think zurb forgot to include it :)
I have you reported this issue, https://github.com/zurb/foundation/issues/3689

Regards

Feather Light almost 6 years ago

Just wait for next version release Erik Smith :)
https://github.com/zurb/foundation/pull/3709

Rafi Benkual almost 6 years ago

This issue has been resolved in master and will be released in 5.0.1. Or, if you are using the Foundation CLI, you can run foundation update.