CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3zurb-foundation
Kombo
Kombo

Reputation: 2381

Zurb Foundation Nav has Limited Style in Rails Project

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:

<body>
  <div id="container" class="twelve columns">
      <div class="fixed contain-to-grid">
        <nav class="top-bar">
          <ul>
            <li class="name"><h1><%= link_to "Home", root_path %></h1></li>
          </ul>
          <section>
            <ul class="left">
              <li><a href="#">Left</a></li>
            </ul>

            <ul class="right">
              <li><a href="#">Right</a></li>
            </ul>
          </section>
        </nav>
      </div>

Which looks like:

Zurb Nav Appearance

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 http://foundation.zurb.com/docs/navigation.php but that does not seem to be the case. The documentation also mentions the javascript dependancies, but those are being included.

Anyone have any ideas on how to start get this to start looking pretty?

EDIT:

Adding the line to the first list like so:

<ul>
            <li class="name"><h1><%= link_to "Home", root_path %></h1></li>
            <li class="toggle-topbar"><a href="#"></a></li>
          </ul>

Renders this:

After first suggestion

Inspecting the element to see if things are display, the navigation JS is there:

(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>li.has-flyout', this).addClass('is-touch');
    } else {
      $('.nav-bar>li.has-flyout', this).hover(function () {
        $(this).children('.flyout').show();
      }, function () {
        $(this).children('.flyout').hide();
      });
    }

  };

})( jQuery );

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:

.nav-bar {
  height: 40px;
  background: #4d4d4d;
  margin-top: 20px;
  padding: 0;
}

Upvotes: 2

Views: 1852

Answers (3)

user1739398
user1739398

Reputation: 350

I had exactly the same problem as you with zurb-foundation 3.0.9. Try upgrade to 3.1.1

In your Gemfile, use:

gem 'zurb-foundation', '~> 3.1.1'

And in application.scss:

@import 'foundation';

Make sure you have this in document ready

$(document).foundationTopBar();

Update Gems 

bundle update

Make sure cache is removed:

bundle exec rake tmp:cache:clear

Cheers!

Upvotes: 7

JAMESSTONEco
JAMESSTONEco

Reputation: 2051

You should place something like this example below, above all of your <div> tags and below the <body> tag. It exists outside of the grid system so it should be above everything. Notice there are no <div> tags.

<nav class="top-bar">
    <ul>
      <li class="name"><h1><a href="#">James Stone</a></h1></li>
      <li class="toggle-topbar"><a href="#"></a></li>
    </ul>
    <section>
      <ul class="right">
        <li class="has-dropdown"><a href="#">I</a>
          <ul class="dropdown">
            <li><a href="#">Bio</a></li>
            <li><a href="#">Resume</a></li>
          </ul>
        </li>
    </section>
  </nav>

Upvotes: 0

n_i_c_k
n_i_c_k

Reputation: 1534

You are missing this line after the first list item

<li class="toggle-topbar"><a href="#"></a></li>

That's probably what's going on, but not 100% positive.

Upvotes: 0

Related Questions