Home/ Questions/Q 9148723
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T11:21:07+00:00

I usually use the Twitter Bootstrap Rails gem for my projects however I thought

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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"
    • 0