Top bar not displaying navigation links at small browser widths (foundation-rails 5.1.1.0)

[DanielKehoe]

With Foundation 5.0.3, the top bar works correctly. At narrow browser widths, the menu icon appears, and clicking on the menu icon reveals a menu of navigation links.

After upgrading to foundation-rails 5.1.1.0, clicking on the top bar menu icon does nothing. The menu of navigation links is not revealed.

First reported by students using the learn-rails example application:
RailsApps/learn-rails#23

You can clone the learn-rails example application to reproduce the issue. In the Gemfile, use gem 'foundation-rails', '5.0.3' to see it work. Use gem 'foundation-rails', '5.1.1.0' to see it fail.

I've tried removing Rails Turbolinks and the issue is not resolved.

I've also tried changing the file views/layouts/application.html.erb and moving <%= javascript_include_tag "application" %> from the head section to the last line of the body section and the issue is not resolved.

[voku]

Hi, I had also some trouble with the top-bar after the update to 5.1.1 -> because I had to edit my html :/ e.g.:
-> https://github.com/RailsApps/learn-rails/blob/master/app/views/layouts/_navigation.html.erb

old: li.toggle-topbar.menu-icon a span "Menu"

new: li.toggle-topbar.menu-icon a "Menu"

[DanielKehoe]

@voku thanks for the suggestion but it doesn't resolve the issue foe me. Removing the span just makes the "hamburger" icon disappear and doesn't enable the navigation links.

[voku]

@DanielKehoe if you replace the div.top-bar-section like this -> http://codepen.io/voku/pen/edEAJ <- I think it will work again ...

[DanielKehoe]

@voku thanks you for your efforts to help.

It looks like the problem is an incompatibility with the Rails asset pipeline.

To get it to work, it is necessary to change the html for the navigation bar:

1. Remove the span around "Menu".
2. Replace <div class="top-bar-section"> with <section class="top-bar-section">

Also, the Foundation JavaScript has to be removed from the Rails asset pipeline:

1. In app/assets/javascripts/application.js remove //= require foundation
2. in views/layouts/application.html.erb add this to the bottom of the file:

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/js/foundation.min.js"></script>
  </body>
</html>

I can fix the HTML for the Top Bar for my apps but it looks like Zurb will have to address the incompatibility with the Rails asset pipeline.

[DanielKehoe]

Opened an issue to address the incompatibility with the Rails asset pipeline:
#4494

[DanielKehoe]

The gem foundation-rails version 5.2.0.0 (released March 6, 2014) resolves the issue.