MaterializeCSS NavBar and SideNav

here is my fix to avoid over lap with the top navbar, and to hide on small to med screens

add:

<ul class="sidenav sidenav-fixed invesible-top" id="mobile-nav">

also optional to make it show on top again on small screens:

<li class="hide-on-large-only">

style:

  @media only screen and (min-width : 992px) {
  .invesible-top {
    top: 65px;
  }
}

You should try:

<style type="text/css">
.side-nav{
    top: 65px;
    width: 250px;
}
</style>

and wrap your code in header and aside:

<header>
<div class="navbar-fixed">

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">User Profile</a></li>
  <li><a href="#!">Settings</a></li>
  <li class="divider"></li>
  <li><a href="#!">Logout</a></li>
</ul>
<div class="nav-wrapper">
<nav class="light-blue lighten-1" role="navigation">
  <div class="nav-wrapper container">
    <a href="#!" class="brand-logo">Point of Sale</a>
    <ul class="right hide-on-med-and-down">
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>
</div>
</div>
</header>

<aside>
<ul id="slide-out" class="side-nav fixed">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
</ul>
</aside>

As the Side Nav documentations says:

You have to offset your content by the width of the side menu. so do like this

<style type="text/css">
.wrapper {
    padding-left: 300px;
}
</style>

and wrap your code in wrapper div

<div class="wrapper">

    <div class="">
        <!-- Dropdown Structure -->
        <ul id="dropdown1" class="dropdown-content">
            <li><a href="#!">User Profile</a></li>
            <li><a href="#!">Settings</a></li>
            <li class="divider"></li>
            <li><a href="#!">Logout</a></li>
        </ul>

        <nav class="light-blue lighten-1" role="navigation">
            <div class="nav-wrapper container">
                <a href="#!" class="brand-logo">Point of Sale</a>
                <ul class="right hide-on-med-and-down">
                    <!-- Dropdown Trigger -->
                    <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
                </ul>
            </div>
        </nav>
    </div>

</div>

<ul id="slide-out" class="side-nav fixed">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
</ul>