Materialize - Like that triggers sidenav disappears

I am trying to get a sidemenu to work on Materialize when should be very simple:

First I add the sidenav content to the page:

<ul id="slide-out" class="sidenav">
<li><div class="user-view">
  <div class="background">
    <img src="images/office.jpg">
  </div>
  <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
  <a href="#name"><span class="white-text name">John Doe</span></a>
  <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>

Then I add the jquery code:

$( document ).ready(function() {
 $('.sidenav').sidenav();
});

And finally the part where to problem is:

I have a nav which goes at the top of the page:

<nav>
<div class="nav-wrapper">
  <a href="#" class="brand-logo" data-target="slide-out" class="sidenav-trigger"><img src="icon.png" alt="" /></a>

  <ul class="left hide-on-med-and-down" style="position: relative; left: 100px;">
    <li><a href="#" data-target="slide-out" class="sidenav-trigger">Trigger SideNav</a></li><!-- This is just not showing -->
  </ul>

</div>
</nav>

For some reason this menu is not showing:

 <li><a href="#" data-target="slide-out" class="sidenav-trigger">Trigger SideNav</a></li>

unless I take this off it ... data-target="slide-out" class="sidenav-trigger"

How can I fix this?

Solution

as I know this is not a problem and the element that has sidenav-trigger class will be shown when the width of the browser is less than 993px. just resize your browser window width to reach less than 993px and see the result.

If it does not work:

I think the problem can be with the content of your link. replace the image with a text and try again.