Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

side-nav links doesn't works in fixed navbar

See original GitHub issue

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

Issue Analytics

State:
Created 7 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

3reactions

Thanoodcommented, Dec 8, 2016

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. 😃

0reactions

tomscholzcommented, Apr 1, 2017

These issues are all duplicates: https://github.com/Dogfalo/materialize/issues/1664 https://github.com/Dogfalo/materialize/issues/3918 https://github.com/Dogfalo/materialize/issues/4046 https://github.com/Dogfalo/materialize/issues/4231 https://github.com/Dogfalo/materialize/issues/437 https://github.com/Dogfalo/materialize/issues/4318 https://github.com/Dogfalo/materialize/issues/3982 https://github.com/Dogfalo/materialize/issues/2879 https://github.com/Dogfalo/materialize/issues/4187

For the future discussion, please use this issue instead. https://github.com/Dogfalo/materialize/issues/3844

Top Results From Across the Web

Materialize side-nav links doesn't work - Stack Overflow

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...

Fix sidenav on large screens not working - MDBootstrap

I am trying to setup my site exactly like the layout DOUBLE NAVIGATION WITH FIXED SIDENAV & FIXED NAVBAR. But no matter what...

Sidenav - Angular Material

link Fixed position sidenavs ... For <mat-sidenav> only (not <mat-drawer> ) fixed positioning is supported. It can be enabled by setting the fixedInViewport ......

Navbar - Bootstrap

Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive...

Navbar - Materialize

You can add icons into links. For icon only links you don't need any additional class. Just pop the i tag in and...