bumbed Top Bar Version, updated implementation to remove side-scroll bug

foundation · Sep 19, 2012 · 4308afd · 4308afd
1 parent 23eb4ce
commit 4308afd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 31 deletions.
diff --git a/scss/foundation/components/modules/_topbar.scss b/scss/foundation/components/modules/_topbar.scss
@@ -11,22 +11,21 @@
     - <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;}
+
+  /* Element that controls breakpoint, no need to change this ever */
+  .top-bar-js-breakpoint { width: $topBarBreakPoint !important; visibility: hidden; }
+
+  /* Wrapped around .top-bar to contain to grid width */
+  .contain-to-grid { width: 100%; background: $topBarBgColor; }
+
+  /* Wrapped around .top-bar to make it fixed at the top */
+  .fixed { width: 100%; left: 0; position: fixed; top: 0; z-index: 99; }
+
   /* <nav> */
   .top-bar { background: $topBarBgColor; height: $topBarHeight; line-height: $topBarHeight; margin: 0 0 $topBarBtmMargin; padding: 0; width: 100%;
 
     /* Contain width to .row width */
-    &.contain-to-grid { margin: 0 auto; position: relative; width: $rowWidth;
-
-      /* Get the black bar to extend all the way */
-      &:before, &:after { background: $topBarBgColor; content:""; display: block; height: $topBarHeight; position: absolute; width: 100%; }
-      &:before { left: -100%; }
-      &:after { right: -100%; }
-
-      /* Contained and fixed at the top */
-      &.fixed { left: 50%; margin-left: -($rowWidth / 2); position: fixed; }
-      ul li.name h1 a { padding-left: $columnGutter / 2; }
-    }
+    .contain-to-grid & { width: $rowWidth; margin: 0 auto; }
 
     /* First <ul> for branding, title, name, etc */
     &>ul {
@@ -105,20 +104,17 @@
       }
 
       /* Left Side <ul> */
-      &.left { float: left; width: auto; }
+      &.left { float: left; width: auto; margin-bottom: 0; }
 
       /* Right Side <ul> */
-      &.right { float: right; width: auto;
+      &.right { float: right; width: auto; margin-bottom: 0;
         /* Dropdown Right Side Alignment */
         .has-dropdown .dropdown { left: auto; right: -1px;
           li.has-dropdown > .dropdown { right: 100%; left: auto; width: 100%; }
         }
       }
     }
 
-    /* Style for when you add 'fixed' as a class to .top-bar */
-    &.fixed { left: 0; position: fixed; top: 0; z-index: 99; }
-
     .js-generated { display: none; }
   }
 
@@ -147,11 +143,7 @@
       .js-generated { display: block; }
 
       /* Override contain to grid stuff for breakpoint */
-      &.contain-to-grid { margin: 0 auto; width: auto;
-        &:before, &:after { display: none; }
-        &.fixed { left: auto; margin-left: auto; position: static; }
-      }
-      &.fixed.expanded { height: auto; }
+      .contain-to-grid & { width: auto; }
 
       /* Setting up the sliding area */
       section { left: 0; position: relative; width: auto; @include single-transition(left, 300ms); }
@@ -162,7 +154,9 @@
 
           /* Branding and name */
           &.name { background: darken($topBarBgColor, 20%);
-            h1 { line-height: 1; }
+            h1 { line-height: 1;
+              a { padding-left: $topBarHeight / 2; }
+            }
           }
 
           /* Dropdown Toggle */

diff --git a/test/topbar.html b/test/topbar.html
@@ -25,10 +25,8 @@
 </head>
 <body>
 
-
-  <!-- <div class="row">
-    <div class="six columns"> -->
-      <nav class="top-bar contain-to-grid" data-breakpoint="940"> <!-- Could do .fixed to fix to top or .contain-to-grid for grid width -->
+    <div class="fixed contain-to-grid"> <!-- Could do .fixed to fix to top or .contain-to-grid for grid width -->
+      <nav class="top-bar">
         <ul>
           <!-- Title Area -->
           <li class="name">
@@ -147,8 +145,7 @@ <h1>
           </ul>
         </section>
       </nav>
-<!--</div>
-  </div> -->
+    </div>
 
   <div class="row">
     <div class="twelve columns">

diff --git a/vendor/assets/javascripts/foundation/jquery.foundation.topbar.js b/vendor/assets/javascripts/foundation/jquery.foundation.topbar.js
@@ -1,5 +1,5 @@
 /*
- * jQuery Foundation Top Bar 2.0
+ * jQuery Foundation Top Bar 2.0.1
  * http://foundation.zurb.com
  * Copyright 2012, ZURB
  * Free to use under the MIT license.
@@ -41,7 +41,7 @@
             if (methods.breakpoint()) {
               settings.$topbar.toggleClass('expanded');
               settings.$topbar.css('min-height', '');
-              
+
             }
           });