side-nav links doesn't works in fixed navbar

[miguelkashir]

I have a navbar with brand logo at left and links at right, and the sidenav function works perfect.
I tried to make the navbar fixed, but now the sidenav links doesn't works (the sidenav appears in grey color)

Code

  <div class="navbar-fixed">
    <nav class="green">
      <div class="nav-wrapper">
        <a href="/" class="brand-logo">
          <i class="material-icons">shopping_basket</i>
          macromeal
        </a>
        <a href="#" data-activates="mobile-demo" class="button-collapse">
          <i class="material-icons">menu</i>
        </a>
        <ul class="right hide-on-med-and-down">
          <%= render 'layouts/links' %>
        </ul>
        <ul class="side-nav" id="mobile-demo">
          <%= render 'layouts/links' %>
        </ul>
      </div>
    </nav>
  </div>

Screenshot

[simonsmh]

Yes same problem.

[Thanood]

Please try moving the side-nav out of the navbar structure. Like this:

  <div class="navbar-fixed">
    <nav class="green">
      <div class="nav-wrapper">
        <a href="/" class="brand-logo">
          <i class="material-icons">shopping_basket</i>
          macromeal
        </a>
        <a href="#" data-activates="mobile-demo" class="button-collapse">
          <i class="material-icons">menu</i>
        </a>
        <ul class="right hide-on-med-and-down">
          <%= render 'layouts/links' %>
        </ul>
      </div>
    </nav>
  </div>
  <ul class="side-nav" id="mobile-demo">
    <%= render 'layouts/links' %>
  </ul>

Not exactly sure but in principle this works. 😃

[simonsmh]

wow its working Daniel Bendel <notifications@github.com>于2016年12月8日周四 下午10:32写道：

…

Please try moving the side-nav out of the nav. Like this: <div class="navbar-fixed"> <nav class="green"> <div class="nav-wrapper"> <a href="/" class="brand-logo"> <i class="material-icons">shopping_basket</i> macromeal </a> <a href="#" data-activates="mobile-demo" class="button-collapse"> <i class="material-icons">menu</i> </a> <ul class="right hide-on-med-and-down"> <%= render 'layouts/links' %> </ul> </div> </nav> </div> <ul class="side-nav" id="mobile-demo"> <%= render 'layouts/links' %> </ul> Not exactly sure but in principle this works. 😃 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#3982 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJEkgwq_VDbLF5WNLRcJeNrQMF5aVExQks5rGBTqgaJpZM4LHMBm> .

[tomscholz]

Duplicate #3844

[miguelkashir]

Thanks @Thanood ! I will try it.
Btw, I already fixed it by this way:

function initialize() {
  $('.button-collapse').sideNav();
  $('.button-collapse').click(removeOverlay);
}

function removeOverlay() {
  $('div[id^=sidenav-overlay]').remove();
}

Oops, sorry @tomscholz . I searched but I didn't find it

[tomscholz]

These issues are all duplicates:
#1664
#3918
#4046
#4231
#437
#4318
#3982
#2879
#4187

For the future discussion, please use this issue instead.
#3844