Creating Small Navbar and a Side Panel in Materialize CSS

Creating Small Navbar and a side panel in Materialize css

Have you tried using a top navbar along with a fixed sidebar? You could then style the width of the sidebar to get the size you want.

<header>
      <nav class="top-nav">
        <div class="nav-wrapper">
            <ul class="right hide-on-med-and-down">
                <li><a href="#">Log In</a></li>
                <li><a href="#">Sign Up</a></li>
            </ul>
        </div>
      </nav>
      <ul style="width:120px; margin-top:65px;" class="side-nav fixed">
        <li><a href="#">Icon 1</a></li>
        <li><a href="#">Icon 2</a></li>
      </ul>      
</header>

MaterializeCSS NavBar and SideNav

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>

Materialize CSS Sidebar

You have to add to the sidebar menu a top attribute with the same pixels as top navbar height (64px in that case).

And after that you may add a calculated height substracting 100% with the previously implemented top pixels (64px) + the footer height (50px), the result is 114px

.sidenav.sidenav-fixed{
    left: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    position: fixed;
    top: 64px;
    height: calc(100% - 114px);
   
}

MaterializeCSS Navbar and Sidenav + Angular 9

Remove the undeclared options variable.

The materialize docs are a little confusing - the javascript initialisation that is listed will actually break your code and it catches a lot of people out. So remove it if you just need the default sidenav functionality.

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
});

If you do need to pass in any options, then declare it like this:

document.addEventListener('DOMContentLoaded', function() {
    var options = {
       edge: 'right'
    }
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
});

options is an object - key value pairs for customising the component, a pattern that you'll see all through materialize components. Here are a list of options that can be configured at the point of initialisation. You can position the sidenav on the other side of screen, run functions when it opens, when it closes etc.

https://materializecss.com/sidenav.html#options

As a side note - ALWAYS check the console for clues when debugging. This is from your codepen:

Uncaught ReferenceError: options is not defined
at HTMLDocument. (vYOeqEZ:61)

Also, final note - you mention componentizing. Read this article about using Materialize with React. It will shed light on the subject.

https://medium.com/@mattdlockyer/youre-using-materialize-css-wrong-470b593e78e9

You also missed the materialicons cdn, so your icons aren't showing:

https://materializecss.com/icons.html

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Materialize CSS - Sidenav overlay covers all the page

I had the same problem. Because <ul class="side-nav"> is contained within <div class="navbar-fixed"> and the overlay has the same z-index, you will always have this problem when using navbar-fixed.

You can mess around with the z-indexes of the various elements, but they each result in less than ideal displays when the side-nav is activated.

To work around this, I put <ul class="side-nav"> parallel in the document structure to <div class="navbar-fixed"> and the problem resolved itself. Like this:

<ul class="side-nav" id="mobile-sidenav">
  <li><a href="#">How It Works?</a></li>
  <li><a href="#">Technology</a></li>
  <li><a href="#">Pricing</a></li>
  <li><a href="#">More</a></li>
  <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
</ul>
<div class="navbar-fixed">
  <nav class="">
    <div class="nav-wrapper red lighten-1">
      <div class="container-fluid">
        <a href="#!" class="brand-logo">
          <img src="img/logo.png">
        </a>
        <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="#">How It Works?</a></li>
          <li><a href="#">Technology</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">More</a></li>
          <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

materialize css: Always show side-nav even on mobile?

Materialize uses CSS transformations to show/hide the side nav, so altering the visibility or opacity will not help you here. A very quick solution is just to fix the translateX transformation at 0. This should make your nav visible at all times.

.side-nav {
    transform: translateX(0%) !important;
}

Materialize side-nav links doesn't work

1. Wrap your JS code for sideNav within documentReady event, and set parameter closeOnClick as true.

2. Bring your side menu (ul element with class"side-nav") at the same level of div with class navbar-fixed . This is to avoid known issues with overlay. See this stackoverflow question and accepted answer

$( document ).ready(function(){$('.button-collapse').sideNav({      closeOnClick: true    }  );});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<div class="navbar-fixed">    <nav>        <div class="nav-wrapper">            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>            <a href="#" class="brand-logo right thin" title="bcgraphixx">Page Title</a>            <ul class="right hide-on-med-and-down">                <li><a class="waves-effect" href="#">Home</a></li>                <li><a class="waves-effect" href="#">About us</a></li>            </ul>        </div>    </nav></div><ul class="side-nav" id="mobile-demo">   <li><a href="##"><center>MENU</center></a></li>   <li><a class="waves-effect" href="#!">Home</a></li>   <li><a class="waves-effect" href="#!">About us</a></li></ul>

---

Related Topics