breakpoint actually is necessary, creating a new element with the 'to…

…p-bar-js-breakpoint' class that contains the width defined by the $topBarBreakPoint sass variable

scss/foundation/components/modules/_topbar.scss

@@ -11,7 +11,7 @@
     - <li class="divider"> creates a divider between nav items, add margins for space
     - <li class="search"> Needs to hold a <form> which can use .row.collapse and pre/postfix buttons or default type="search"
 */
-
+.top-bar-js-breakpoint {width:$topBarBreakPoint !important; visibility:hidden;}
   /* <nav> */
   .top-bar { background: $topBarBgColor; height: $topBarHeight; line-height: $topBarHeight; margin: 0 0 $topBarBtmMargin; padding: 0; width: 100%;
 

vendor/assets/javascripts/foundation/jquery.foundation.topbar.js

@@ -13,7 +13,6 @@
 
   var settings = {
       index : 0,
-      breakPoint : 767,
       initialized : false
     },
     methods = {
@@ -23,7 +22,9 @@
           settings.$w = $(window),
           settings.$topbar = $('nav.top-bar');
           settings.$titlebar = settings.$topbar.children('ul:first');
-          settings.breakPoint = settings.$topbar.data('breakpoint') || settings.breakPoint;
+          var breakpoint = $("<div class='top-bar-js-breakpoint'/>").appendTo("body");
+          settings.breakPoint = breakpoint.width();
+          breakpoint.remove();
 
           if (!settings.initialized) {
             methods.assemble();
@@ -40,6 +41,7 @@
             if (methods.breakpoint()) {
               settings.$topbar.toggleClass('expanded');
               settings.$topbar.css('min-height', '');
+
             }
           });