Search code examples
javascriptjqueryhtmlcssmaterialize

How can I get the Menu Button to appear in the Nav Bar Materialize CSS?

$(document).ready(function() {
  $('.sidenav').sidenav();
});
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script type="text/javascript" src="../js/script.js"></script>
  <link rel="stylesheet" href="../css/style.css">
  <meta charset="utf-8">
  <title>Web Mail</title>
</head>

<body>

  <nav id="navBar">
    <div class="nav-wrapper">
      <ul class="left">
        <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        </li>
      </ul>
      <ul class="right">
        <li><a href="#!"><i class="material-icons right">archive</i></a>
        </li>
        <li><a href="#!"><i class="material-icons right">delete</i></a>
        </li>
        <li><a href="#!"><i class="material-icons right">mail</i></a>
        </li>
      </ul>
    </div>
  </nav>

  <ul id="slide-out" class="sidenav">
    <li>
      <div class="user-view">
        <div class="background">
          <img src="../images/sidePanelBackgroundImage.jpg">
        </div>
        <a href="#user"><img class="circle" src="../images/profilePicture.png"></a>
        <a href="#name"><span class="white-text name">John Doe  </span></a>
        <a href="#email"><span class="white-text email">test@gmail.com</span></a>
      </div>
    </li>
    <li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
      <li>
        <li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
          <li>
            <li>
              <div class="divider"></div>
            </li>
            <li><a class="subheader">Mail Functions</a></li>
            <a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
            <a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
  </ul>

  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

</body>

</html>

I am not sure how to move my menu item which appears below the navbar, learning how to use materialize. I want the side panel to pop out whenever the menu button is clicked in the nav bar (web).

I have tried various things including moving the slideOut into the navBar, but the menu item disappears as a result.

Solution

  • Overwrite the style of sidenav-trigger to display:block !important

    $(document).ready(function() {
  $('.sidenav').sidenav();
});
    <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script type="text/javascript" src="../js/script.js"></script>
  <link rel="stylesheet" href="../css/style.css">
  <meta charset="utf-8">
  <title>Web Mail</title>
</head>

<body>

  <nav id="navBar">
    <div class="nav-wrapper">
      <ul class="left">
        <a href="#" data-target="slide-out" class="sidenav-trigger" style="display:block !important"><i class="material-icons">menu</i></a>
        </li>
      </ul>
      <ul class="right">
        <li><a href="#!"><i class="material-icons right">archive</i></a>
        </li>
        <li><a href="#!"><i class="material-icons right">delete</i></a>
        </li>
        <li><a href="#!"><i class="material-icons right">mail</i></a>
        </li>
      </ul>
    </div>
  </nav>

  <ul id="slide-out" class="sidenav">
    <li>
      <div class="user-view">
        <div class="background">
          <img src="https://static01.nyt.com/images/2018/05/27/sports/27championstrophy/merlin_138716301_7655ceb3-fb5e-4354-821a-bfad8d475786-superJumbo.jpg?quality=90&auto=webp" style="width:100%">
        </div>
        <a href="#user"><img class="circle" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Real_Madrid_CF.svg/1200px-Real_Madrid_CF.svg.png"></a>
        <a href="#name"><span class="white-text name">John Doe  </span></a>
        <a href="#email"><span class="white-text email">test@gmail.com</span></a>
      </div>
    </li>
    <li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
      <li>
        <li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
          <li>
            <li>
              <div class="divider"></div>
            </li>
            <li><a class="subheader">Mail Functions</a></li>
            <a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
            <a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
  </ul>

</body>

</html>