title: Zurb Foundation Nav has Limited Style in Rails Project
body: <p>I'm using Zurb Foundation 3 via the zurb-foundation gem on a rails project. Everything is going well until I've tried to add a navigation bar:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="container" class="twelve columns"&gt;
        &lt;div class="fixed contain-to-grid"&gt;
          &lt;nav class="top-bar"&gt;
            &lt;ul&gt;
              &lt;li class="name"&gt;&lt;h1&gt;&lt;%= link_to "Home", root_path %&gt;&lt;/h1&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;section&gt;
              &lt;ul class="left"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Left&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;ul class="right"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Right&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/section&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Which looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/FxUY8.png" alt="Zurb Nav Appearance"></p>
  
  <p>I have not override any of the zurb styling except for the colors, my assumption is that it would appear pretty similar to the first example in the documentation <a href="http://foundation.zurb.com/docs/navigation.php" rel="nofollow noreferrer">http://foundation.zurb.com/docs/navigation.php</a> but that does not seem to be the case. The documentation also mentions the javascript dependancies, but those are being included.</p>
  
  <p>Anyone have any ideas on how to start get this to start looking pretty?</p>
  
  <p>EDIT:</p>
  
  <p>Adding the line to the first list like so:</p>
  
  <pre><code>&lt;ul&gt;
              &lt;li class="name"&gt;&lt;h1&gt;&lt;%= link_to "Home", root_path %&gt;&lt;/h1&gt;&lt;/li&gt;
              &lt;li class="toggle-topbar"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  </code></pre>
  
  <p>Renders this:</p>
  
  <p><img src="https://i.stack.imgur.com/QzJUk.png" alt="After first suggestion"></p>
  
  <p>Inspecting the element to see if things are display, the navigation JS is there:</p>
  
  <pre><code>(function ($){
  
    $.fn.foundationNavigation = function (options) {
  
      var lockNavBar = false;
      // Windows Phone, sadly, does not register touch events :(
      if (Modernizr.touch || navigator.userAgent.match(/Windows Phone/i)) {
        $(document).on('click.fndtn touchstart.fndtn', '.nav-bar a.flyout-toggle', function (e) {
          e.preventDefault();
          var flyout = $(this).siblings('.flyout').first();
          if (lockNavBar === false) {
            $('.nav-bar .flyout').not(flyout).slideUp(500);
            flyout.slideToggle(500, function () {
              lockNavBar = false;
            });
          }
          lockNavBar = true;
        });
        $('.nav-bar&gt;li.has-flyout', this).addClass('is-touch');
      } else {
        $('.nav-bar&gt;li.has-flyout', this).hover(function () {
          $(this).children('.flyout').show();
        }, function () {
          $(this).children('.flyout').hide();
        });
      }
  
    };
  
  })( jQuery );
  </code></pre>
  
  <p>Looking for the css from foundation, it is working for buttons and everything, and the nav bar styles seem to be there as well, for example:</p>
  
  <pre><code>.nav-bar {
    height: 40px;
    background: #4d4d4d;
    margin-top: 20px;
    padding: 0;
  }
  </code></pre>