CODEWITHSUNDEEP
htmlruby-on-rails-3sasszurb-foundation
user788581
user788581

Reputation:

Zurb Foundation gem broken navigation

I usually use the Twitter Bootstrap Rails gem for my projects however I thought I would give the Zurb Foundation gem a go. I've followed the install instructions to the letter. When I added the navigation: 

<div class="row">
 <div class="three columns">
    <h1><img src="http://placehold.it/400x100&text=Logo" /></h1>
  </div>
  <div class="nine columns">
    <ul class="nav-bar right">
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

I get the following:

Screenshot broken navigation

Notice that the logo placeholder is not aligned with the navigation on the right and the navigation links do not have the grey gradient on them.

My application.html.erb looks like this:

<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8" />

    <!-- Uncomment to make IE8 render like IE7 -->
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=7" /> -->

    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) :  CONFIG['title'] %></title>

    <!-- Included CSS Files -->
    <%= stylesheet_link_tag    "application" %>

  <%= csrf_meta_tags %>
</head>
<body>

  <%= render 'layouts/navigation' %>

  <div class="container">
    <%= yield %>
  </div>

  <!-- Included JS Files  -->
  <%= javascript_include_tag "application" %>

  <% if CONFIG['google_analytics_id'] %>
    <!-- Google Analytics -->
    <script>
      var _gaq=[['_setAccount','<%= CONFIG['google_analytics_id'] %>'],['_trackPageview']];
      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
      g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
      s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
  <% end %>

</body>
</html>

Upvotes: 0

Views: 192

Answers (1)

user788581
user788581

Reputation:

I solved this by updating the Zurb Foundation gem and referring to the documentation. I was using Zurb 2.X and not 3.X.

gem file should include:

gem 'compass-rails'
gem 'zurb-foundation', '~> 3.2.4'

application.scss should now have: 

@import "foundation";

instead of: 

*= require "foundation"

Upvotes: 1

Related Questions