title: Creating Small Navbar and a side panel in Materialize css
body: <p>I am using materialize css for my new project. I have a simple mock up of the page I have in mind. This is what I would like to have. The navbar above and a side panel shouldn't hide.</p>
  
  <p><img src="https://i.stack.imgur.com/i5LDQ.png" alt="The screen mock up"></p>
  
  <p>I have tried changing the css of materialize to get a side navbar, but to no avail. I changed the </p>
  
  <pre><code>@media only screen and (max-width: 992px) {
      .side-nav.fixed {
  -webkit-transform: translateX(-105%);
          transform: translateX(-105%);
  }
  </code></pre>
  
  <p>to </p>
  
  <pre><code>@media only screen and (max-width: 2000px) {
      .side-nav.fixed {
  -webkit-transform: translateX(-105%);
          transform: translateX(-105%);
  }
  </code></pre>
  
  <p>I also tried to change the .js file, but it also didnt work. I have decreased the size of normal navbar over-riding the <code>line-height</code> property of nav. Is it possible to have to navbars together ? If not, how may I be able to get a side panel. I only need the side panel to show 4 icons, which will have tooltip and on clicking would load up a modal. I tried using grid mechanism of materializecss but wasn't able t get what I want.</p>
  
  <p>Any help would be much appreciated.</p>
  
  <p>Thanks.</p>