updated docs: navbar add navbar class #573

Author: gselderslaghs

src/navbar.html

@@ -12,7 +12,7 @@
           <div class="col s12 m8 offset-m1 xl7 offset-xl1">
             <div id="right" class="section scrollspy">
               <p class="caption">
-                The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the
+                There are 2 main parts of the navbar. A logo or brand link, and the
                 navigations links. You can align these links to the left or right.
               </p>
               <h3 class="header">Right Aligned Links</h3>
@@ -23,7 +23,7 @@ <h3 class="header">Right Aligned Links</h3>
                 </code>
                 that contains them.
               </p>
-              <nav>
+              <nav class="navbar">
                 <div class="nav-wrapper">
                   <div class="col s12">
                     <a href="#!" class="brand-logo">Logo</a>
@@ -44,7 +44,7 @@ <h3 class="header">Right Aligned Links</h3>
 
               <pre><code class="language-html">
 <xmp>
-<nav>
+<nav class="navbar">
   <div class="nav-wrapper">
     <a href="#" class="brand-logo">Logo</a>
     <ul id="nav-mobile" class="right hide-on-med-and-down">
@@ -67,7 +67,7 @@ <h3 class="header">Left Aligned Links</h3>
                 </code>
                 that contains them.
               </p>
-              <nav>
+              <nav class="navbar">
                 <div class="nav-wrapper">
                   <div class="col s12">
                     <a href="#!" class="brand-logo right">Logo</a>
@@ -88,7 +88,7 @@ <h3 class="header">Left Aligned Links</h3>
 
               <pre><code class="language-html">
 <xmp>
-<nav>
+<nav class="navbar">
   <div class="nav-wrapper">
     <a href="#" class="brand-logo right">Logo</a>
     <ul id="nav-mobile" class="left hide-on-med-and-down">
@@ -127,7 +127,7 @@ <h3 class="header">Centering the logo</h3>
 
               <pre><code class="language-html">
 <xmp>
-<nav>
+<nav class="navbar">
   <div class="nav-wrapper">
     <a href="#" class="brand-logo center">Logo</a>
     <ul id="nav-mobile" class="left hide-on-med-and-down">
@@ -145,7 +145,7 @@ <h3 class="header">Centering the logo</h3>
               <h3 class="header">Active Items</h3>
               <p>Add active class to your li tags to denote the current page.</p>
 
-              <nav>
+              <nav class="navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo center">Logo</a>
                   <ul class="left hide-on-med-and-down">
@@ -164,7 +164,7 @@ <h3 class="header">Active Items</h3>
 
               <pre><code class="language-html">
 <xmp>
-<nav>
+<nav class="navbar">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo center">Logo</a>
     <ul class="left hide-on-med-and-down">
@@ -186,7 +186,7 @@ <h3 class="header">Extended Navbar with Tabs</h3>
                 can just include a tabs component inside the <span class="language-html">nav-wrapper</span>.
               </p>
 
-              <nav class="nav-extended">
+              <nav class="navbar nav-extended">
                 <div class="nav-wrapper">
                   <a href="#" class="brand-logo">Logo</a>
                   <a href="#" data-target="mobile-demo" class="sidenav-trigger">
@@ -241,7 +241,7 @@ <h3 class="header">Extended Navbar with Tabs</h3>
 
               <pre><code class="language-html">
 <xmp>
-<nav class="nav-extended">
+<nav class="navbar nav-extended">
   <div class="nav-wrapper">
     <a href="#" class="brand-logo">Logo</a>
     <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
@@ -286,7 +286,7 @@ <h3 class="header">Fixed Navbar</h3>
               <pre><code class="language-html">
 <xmp>
 <div class="navbar-fixed">
-  <nav>
+  <nav class="navbar">
     <div class="nav-wrapper">
       <a href="#!" class="brand-logo">Logo</a>
       <ul class="right hide-on-med-and-down">
@@ -321,7 +321,7 @@ <h3 class="header">Navbar Dropdown Menu</h3>
                   <a href="#!">three</a>
                 </li>
               </ul>
-              <nav>
+              <nav class="navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo">Logo</a>
                   <ul class="right hide-on-med-and-down">
@@ -351,7 +351,7 @@ <h3 class="header">Navbar Dropdown Menu</h3>
   <li class="divider"></li>
   <li><a href="#!">three</a></li>
 </ul>
-<nav>
+<nav class="navbar">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo">Logo</a>
     <ul class="right hide-on-med-and-down">
@@ -386,7 +386,7 @@ <h5>Trigger dropdown menu on click</h5>
             <div id="icons" class="section scrollspy">
               <h3 class="header">Icon Links</h3>
 
-              <nav>
+              <nav class="navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo"> <i class="material-icons">cloud</i>Logo</a>
                   <ul class="right hide-on-med-and-down">
@@ -419,7 +419,7 @@ <h3 class="header">Icon Links</h3>
               </p>
               <pre><code class="language-html">
 <xmp>
-<nav>
+<nav class="navbar">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo"><i class="material-icons">cloud</i>Logo</a>
     <ul class="right hide-on-med-and-down">
@@ -433,7 +433,7 @@ <h3 class="header">Icon Links</h3>
 </xmp>
 </code></pre>
 
-              <nav>
+              <nav class="navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo">Logo</a>
                   <ul class="right hide-on-med-and-down">
@@ -456,7 +456,7 @@ <h3 class="header">Icon Links</h3>
               </p>
               <pre><code class="language-html">
 <xmp>
-<nav>
+<nav class="navbar">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo">Logo</a>
     <ul class="right hide-on-med-and-down">
@@ -472,7 +472,7 @@ <h3 class="header">Icon Links</h3>
             <div id="buttons" class="section scrollspy">
               <h3 class="header">Buttons</h3>
 
-              <nav>
+              <nav class="navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo">Logo</a>
                   <ul class="right hide-on-med-and-down">
@@ -498,7 +498,7 @@ <h3 class="header">Buttons</h3>
               </p>
               <pre><code class="language-html">
 <xmp>
-<nav>
+<nav class="navbar">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo">Logo</a>
     <ul class="right hide-on-med-and-down">
@@ -514,7 +514,7 @@ <h3 class="header">Buttons</h3>
               <h5>Halfway FAB in Extended Navbar</h5>
               <p>Add a halfway FAB to your extended navbar.</p>
 
-              <nav class="nav-extended">
+              <nav class="navbar nav-extended">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo">Logo</a>
                   <ul class="right hide-on-med-and-down">
@@ -539,7 +539,7 @@ <h5>Halfway FAB in Extended Navbar</h5>
 
               <pre><code class="language-html">
 <xmp>
-<nav class="nav-extended">
+<nav class="navbar nav-extended">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo">Logo</a>
     <ul class="right hide-on-med-and-down">
@@ -562,7 +562,7 @@ <h5>Halfway FAB in Extended Navbar</h5>
             <div id="search-docs" class="section scrollspy">
               <h3 class="header">Search Bar</h3>
 
-              <nav>
+              <nav class="navbar">
                 <div class="nav-wrapper">
                   <form>
                     <div class="input-field">
@@ -579,7 +579,7 @@ <h3 class="header">Search Bar</h3>
               <p>You can add a search form in the navbar.</p>
               <pre><code class="language-html">
 <xmp>
-<nav>
+<nav class="navbar">
   <div class="nav-wrapper">
     <form>
       <div class="input-field">
@@ -597,7 +597,7 @@ <h3 class="header">Search Bar</h3>
             <div id="mobile-collapse" class="section scrollspy">
               <h3 class="header">Mobile Collapse Button</h3>
 
-              <nav>
+              <nav class="navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo">Logo</a>
                   <a href="#" data-target="mobile-demo" class="sidenav-trigger">
@@ -647,7 +647,7 @@ <h3 class="header">Mobile Collapse Button</h3>
               </p>
               <pre><code class="language-html">
 <xmp>
-<nav>
+<nav class="navbar">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo">Logo</a>
     <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>