title: MaterializeCSS NavBar and SideNav
body: <p>I'm creating a sb admin 2 like page where it has 2 navigations that looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/pY9CK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pY9CK.png" alt="enter image description here"></a></p>
  
  <p>And what I've done so far is this:</p>
  
  <p><a href="https://i.stack.imgur.com/pP2ST.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pP2ST.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the side navigation extends at the top bar. My code so far is this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;!--Import Google Icon Font--&gt;
      &lt;link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
      &lt;!--Import materialize.css--&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/&gt;
  
      &lt;!--Let browser know website is optimized for mobile--&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
  &lt;div class="navbar-fixed"&gt;
  
  &lt;!-- Dropdown Structure --&gt;
  &lt;ul id="dropdown1" class="dropdown-content"&gt;
    &lt;li&gt;&lt;a href="#!"&gt;User Profile&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#!"&gt;Settings&lt;/a&gt;&lt;/li&gt;
    &lt;li class="divider"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#!"&gt;Logout&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;nav class="light-blue lighten-1" role="navigation"&gt;
    &lt;div class="nav-wrapper container"&gt;
      &lt;a href="#!" class="brand-logo"&gt;Point of Sale&lt;/a&gt;
      &lt;ul class="right hide-on-med-and-down"&gt;
        &lt;!-- Dropdown Trigger --&gt;
        &lt;li&gt;&lt;a class="dropdown-button" href="#!" data-activates="dropdown1"&gt;Profile&lt;i class="material-icons right"&gt;arrow_drop_down&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  
  &lt;/div&gt;
  
  &lt;ul id="slide-out" class="side-nav fixed"&gt;
    &lt;li&gt;&lt;a href="#!"&gt;First Sidebar Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#!"&gt;Second Sidebar Link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
      &lt;!--Import jQuery before materialize.js--&gt;
      &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/materialize.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        (function($){
          $(function(){
  
            $('.button-collapse').sideNav();
  
          }); // end of document ready
        })(jQuery); // end of jQuery name space
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I am trying to achieve is this:</p>
  
  <p><a href="https://i.stack.imgur.com/U940T.png" rel="noreferrer"><img src="https://i.stack.imgur.com/U940T.png" alt="enter image description here"></a></p>
  
  <p>Is this possible?</p>