Home/ Questions/Q 8660463
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T16:15:32+00:00

I’m using Zurb Foundation 3 via the zurb-foundation gem on a rails project. Everything

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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!

    • 0