Zurb Foundation 5 toggle-topbar not working

Question

Just switched my rails project to test Zurb Foundation 5 and now the toggle-topbar menu is not working.

When the viewport is small, the top bar menu items disappear and the menu icon is displayed as before, but when I click on the menu icon nothing occurs.

I have the following code to display a top-bar menu.

<nav class="top-bar">
  <ul class="title-area">
    <li class="name"></li>
    <li class="toggle-topbar menu-icon">
      <a>{href: "#"}
        <span>Menú</span></a>
    </li>
  </ul>
  <section class="top-bar-section">
    <ul class="left">
      <li>
        <a class="i fi-home">{href: "/ui/home"}
          &nbsp;Inicio</a></li>
      <li>
        <a>{href: "/ui/wine_reviews"} Críticas de Vinos</a></li>
      <li>
        <a>{href: "/ui/wine_tastings"} Catas y Maridajes</a></li>
      <li>
        <a>{href: "/ui/blogs"} Noticias</a></li>
    </ul>
    <ul class="right">
      <li>
        <a>{href: "#"}
          <i class="fi-lock"></i>
          &nbsp;Club TastaVi</a></li>
    </ul>
  </section>
</nav>

It's a top-bar menu contained in my grid.

I actually have the idea that something in the CSS needs to be changed. I only noticed the issue after a friend opened my site on his iPhone. On my Galaxy Note I didn't experience the issue. After fumbling around on the iPhone, I noticed that if I "click" left of the menu icon, the menu actually shows up as it should... — , Dec 31 '13 at 01:55

score 15 · Answer 1 · answered Nov 22 '13 at 22:00

15

I had the same problem with the top bar. After comparing zurbs code with mine I noticed the difference.

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

I was missing the data-topbar. After adding that mine topbar started working correctly.

answered Nov 22 '13 at 22:00

Kcrow

161
1
4

1

This fixed it immediately – JGallardo Nov 22 '13 at 22:04

score 5 · Accepted Answer · answered Nov 22 '13 at 17:09

5

The problem appears to be in the Foundation.topbar.js file. The following section of code

breakpoint : function () {
        return matchMedia(Foundation.media_queries['medium']).matches;
    }

needs to be changed to

breakpoint : function () {
        return !matchMedia(Foundation.media_queries['topbar']).matches;
    }

answered Nov 22 '13 at 17:09

4

Did this work for you? because I fixed it easily by following the suggestion to change `
` to `
`.
– JGallardo Nov 22 '13 at 22:05
1

@JGallardo - Yes. Adding the data-topbar attribute fixed it for medium sized screens. I needed my fix to get it working for small sized screens. When did you download Foundation 5? I heard that the code in Topbar.js was corrected sometime today and you might have received a new build with the patch in place. – Nov 22 '13 at 23:39
The updated code is now `breakpoint : function () { return $(window).width() <= this.settings.breakPoint || $('html').hasClass('lt-ie9'); },` but I think I am missing something to initialize this – JGallardo Nov 26 '13 at 03:07
@JGallardo I had to add your code to overwrite the breakpoint function in Foundation.libs.topbar for some reason. So, apparently it's still not fixed with the latest version. – jangosteve Dec 07 '13 at 22:22
1

none of the solutions provided here is working for me; I already have the `data-topbar` and @user1 code was already in my foundation.topbar.js file, though I'm loading the min version. any other thoughts? – ithil Dec 09 '13 at 16:37
@ithil - Could you get a fresh copy of Foundation 5 from the Zurb website and try again? Also, do you see any error in your javascript console? – Dec 09 '13 at 17:35
@user1 you're right, I'm getting plenty of errors the first being `$(...).foundation is not a function` even if I do `$(document).foundation();` before the close tag. so it's all my JS that's failing, I'll double check – ithil Dec 10 '13 at 10:55
Where in the rails application exactly would I change this code? I can't seem to find the exact foundation.topbar.js file... – himanish.k Sep 30 '15 at 06:24
@himanish.k - This thread is from 2013 and no longer relevant. Download a new copy of foundation from the zurb website and start a new question if it still doesnt work for you. – Sep 30 '15 at 15:30
I did open up another question and found the answer. Thanks! http://stackoverflow.com/questions/32855110/zurb-foundation-5-rails-4-toggle-topbar-wont-work – himanish.k Sep 30 '15 at 15:32

score 2 · Answer 3 · answered Dec 13 '13 at 23:09

2

Just an FYI, there is another bug in the topbar that breaks scrolling. You need to change line 38 of foudation.topbar.js from:

self.settings.stick_topbar = topbar;

to

self.settings.sticky_topbar = topbar;

This has been fixed in the 5.0.3 release but as of last night, the Foundation website was still serving 5.0.2

answered Dec 13 '13 at 23:09

DanHeidel

671
1
8
17

1

I can verify that as of 12th of Feb 2014, this change still hasn't been made in the served version of Foundation. Strange, that after three months, Zurb still hasn't updated.. – Sander Schaeffer Feb 12 '14 at 21:40

score 2 · Answer 4 · answered Nov 16 '14 at 23:54

Here's the minimum you need to get it working... I was missing $(document).foundation();...

<html>
<head>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css">
</head>
<body>


<nav class="top-bar" data-topbar="" data-options="is_hover: false" role="navigation">
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">Mobile Parent Links</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section" style="left: 0%;">
        <ul class="left">
            <li class="has-dropdown not-click"><a href="http://foundation.zurb.com/docs/components/topbar.html">Item 1</a>

                <ul class="dropdown">
                    <li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>
                    <li class="parent-link show-for-small">
                        <a class="parent-link js-generated" href="http://foundation.zurb.com/docs/components/topbar.html">Item 1</a></li>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.topbar.min.js'></script>

<script>
$(document).ready(function() {
    $(document).foundation();
});
</script>

</body>
</html>

For Angular.js, also do it like this: http://stackoverflow.com/questions/16753003/angularjs-initialize-zurb-foundation-js#answer-17367185 — Nigel Sheridan-Smith, Nov 17 '14 at 00:15

score 0 · Answer 5 · answered Dec 06 '13 at 01:20

0

I've had same problem before. For me, it works when I include the topbar.js inside the body and under the foundation.js.

So, instead of

<head>
   <script src="../js/foundation.js"></script>
   <script src="../js/foundation/foundation.topbar.js"></script>
....
</head>

Try to put the topbar.js inside the body like this

<head>
   <script src="../js/foundation.js"></script>
....
</head>

<body>
   <script src="../js/foundation/foundation.topbar.js"></script>
....
</body>

answered Dec 06 '13 at 01:20

bagz_man

555
2
8
20

just to know, where is your `$(document).foundation();` call? – ithil Dec 09 '13 at 16:38
I put it at the end of the body – bagz_man Dec 14 '13 at 00:38

score 0 · Answer 6 · answered Mar 21 '14 at 07:10

I experienced a similar problem with Foundation 5.1.1. None of the above suggested fixes were applicable for me (I already had the data-topbar attribute, and the breakpoint function was already updated in this release of Foundation). I'm testing my code-in-development with Firefox on MacOS. My Javascript includes are at the end of the body.

In my case, the problem was fixed by upgrading Zurb to version 5.2.1.

score 0 · Answer 7 · answered Jun 09 '15 at 08:58

I experienced that issue since yesterday evening & going through all of such threads, nothing trick really helped. At last, following are the steps that helped me resolving the issue:

Re-Downloaded updated Complete Foundation.
Included html meta(viewport) tag that I was missing earlier.
I'm including the files at my page in this way:

<link rel="stylesheet" href="/css/foundation/foundation.css"/>
<link rel="stylesheet" href="/css/foundation/app.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="/js/jquery-1.11.2.min.js"></script>
<script src="/js/foundation/foundation.js"></script>
<script src="/js/foundation/foundation.topbar.js"></script>
Called Foundation function in jquery rather than js as below:
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>

Zurb Foundation 5 toggle-topbar not working

7 Answers7