navbar fix again..

Dogfalo · Nov 9, 2014 · f0c7445 · f0c7445
1 parent a65baa4
commit f0c7445
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 40 deletions.
diff --git a/components.html b/components.html
@@ -17,25 +17,27 @@
 <body>
   <nav>
     <div class="container">
-      <a href="index.html" class="brand-logo">Materialize</a>
-      <ul class="right side-nav" id="nav-mobile">
-        <li><a href="about.html">About</a></li>
-        <li><a href="sass.html">SASS</a></li>
-        <li><a href="components.html">Components</a></li>
-        <li><a href="javascript.html">JavaScript</a></li>
-      </ul>
-      <a class="button-collapse" href="#" data-activates='nav-mobile'><i class="entypo list"></i></a>
+      <div class="nav-wrapper">
+        <a href="index.html" class="brand-logo">Materialize</a>
+        <ul class="right side-nav" id="nav-mobile">
+          <li><a href="about.html">About</a></li>
+          <li><a href="sass.html">SASS</a></li>
+          <li><a href="components.html">Components</a></li>
+          <li><a href="javascript.html">JavaScript</a></li>
+        </ul>
+        <a class="button-collapse" href="#" data-activates='nav-mobile'><i class="entypo list"></i></a>
+      </div>
     </div>
   </nav>
-  <div class="row white z-depth-1">
+  <div class="row white z-depth-1" style="position: relative;">
     <div class="container">
       <ul class="tabs">
         <li class="tab"><a href="#tab1">Typography</a></li>
         <li class="tab"><a href="#tab2">Grid</a></li>
         <li class="tab"><a href="#tab4">Forms</a></li>
         <li class="tab"><a href="#tab5">Buttons</a></li>
         <li class="tab"><a href="#tab6">Navbar</a></li>
-				<li class="tab col s2"><a href="#tab7">Cards</a></li>
+				<li class="tab"><a href="#tab7">Cards</a></li>
       </ul>
     </div>
   </div>
@@ -387,26 +389,30 @@ <h2 class="header">Navbar</h2>
 
         <h4 class="header">Right Aligned Links</h4>
         <nav>
-          <div class="col s12">
-            <a href="#" class="brand-logo">Logo</a>
-            <ul>
-              <li><a href="javascript:void(0);">SASS</a></li>
-              <li><a href="javascript:void(0);">Components</a></li>
-              <li><a href="javascript:void(0);">JavaScript</a></li>
-            </ul>
+          <div class="nav-wrapper">
+            <div class="col s12">
+              <a href="#" class="brand-logo">Logo</a>
+              <ul>
+                <li><a href="javascript:void(0);">SASS</a></li>
+                <li><a href="javascript:void(0);">Components</a></li>
+                <li><a href="javascript:void(0);">JavaScript</a></li>
+              </ul>
+            </div>
           </div>
         </nav>
       </div>
       <div class="row">
         <pre><code class="language-markup col s12">
     &lt;nav>
-      &lt;div class="col s12">
-        &lt;a href="#" class="brand-logo">Logo&lt;/a>
-        &lt;ul>
-          &lt;li>&lt;a href="sass.html">SASS&lt;/a>&lt;/li>
-          &lt;li>&lt;a href="components.html">Components&lt;/a>&lt;/li>
-          &lt;li>&lt;a href="javascript.html">JavaScript&lt;/a>&lt;/li>
-        &lt;/ul>
+      &lt;div class="nav-wrapper">
+        &lt;div class="col s12">
+          &lt;a href="#" class="brand-logo">Logo&lt;/a>
+          &lt;ul>
+            &lt;li>&lt;a href="sass.html">SASS&lt;/a>&lt;/li>
+            &lt;li>&lt;a href="components.html">Components&lt;/a>&lt;/li>
+            &lt;li>&lt;a href="javascript.html">JavaScript&lt;/a>&lt;/li>
+          &lt;/ul>
+        &lt;/div>
       &lt;/div>
     &lt;/nav>
         </code></pre>
@@ -415,26 +421,30 @@ <h4 class="header">Right Aligned Links</h4>
     <div class="row">
       <h4 class="header">Left Aligned Links</h4>
       <nav>
-        <div class="col s12">
-          <a href="#" class="brand-logo right">Logo</a>
-          <ul class="left">
-            <li><a href="javascript:void(0);">SASS</a></li>
-            <li><a href="javascript:void(0);">Components</a></li>
-            <li><a href="javascript:void(0);">JavaScript</a></li>
-          </ul>
+        <div class="nav-wrapper">
+          <div class="col s12">
+            <a href="#" class="brand-logo right">Logo</a>
+            <ul class="left">
+              <li><a href="javascript:void(0);">SASS</a></li>
+              <li><a href="javascript:void(0);">Components</a></li>
+              <li><a href="javascript:void(0);">JavaScript</a></li>
+            </ul>
+          </div>
         </div>
       </nav>
       </div>
       <div class="row">
         <pre><code class="language-markup col s12">
     &lt;nav>
-      &lt;div class="col s12">
-        &lt;a href="#" class="brand-logo right">Logo&lt;/a>
-        &lt;ul class="left">
-          &lt;li>&lt;a href="sass.html">SASS&lt;/a>&lt;/li>
-          &lt;li>&lt;a href="components.html">Components&lt;/a>&lt;/li>
-          &lt;li>&lt;a href="javascript.html">JavaScript&lt;/a>&lt;/li>
-        &lt;/ul>
+      &lt;div class="nav-wrapper">
+        &lt;div class="col s12">
+          &lt;a href="#" class="brand-logo right">Logo&lt;/a>
+          &lt;ul class="left">
+            &lt;li>&lt;a href="sass.html">SASS&lt;/a>&lt;/li>
+            &lt;li>&lt;a href="components.html">Components&lt;/a>&lt;/li>
+            &lt;li>&lt;a href="javascript.html">JavaScript&lt;/a>&lt;/li>
+          &lt;/ul>
+        &lt;/div>
       &lt;/div>
     &lt;/nav>
         </code></pre>

diff --git a/css/ghpages-materialize.css b/css/ghpages-materialize.css
@@ -2414,7 +2414,7 @@ a {
 nav {
   color: #fff;
   width: 100%; }
-  nav .container {
+  nav .nav-wrapper {
     position: relative; }
   nav a {
     color: #fff; }

diff --git a/sass/components/_navbar.scss b/sass/components/_navbar.scss
@@ -4,7 +4,7 @@ nav {
   @extend .red.lighten-2;
   width: 100%;
 
-  .container {
+  .nav-wrapper {
     position: relative;
   }