MaterializeCSS NavBar and SideNav
<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>