Fixed Navbar with Mobile Collapse broken in 0.97.8

[drewkennelly]

When using a Fixed Navbar and Mobile Collapse together, the overlay that normally covers the rest of the screen is now also covering the SideNav, which makes the links un-clickable. I tested it without the fixed navbar and there is no issue.

This was not a problem 0.97.7

Screenshot attached of the bug, as well as the code used (I replaced my code with the exact code from the documentation to rule out any possibility that my menu was the cause).

<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper">
            <a href="#!" class="brand-logo">Logo</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">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
            <ul class="side-nav" id="mobile-demo">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
        </div>
    </nav>
</div>

[drewkennelly]

The code I have comes directly from http://materializecss.com/navbar.html#mobile-collapse and http://materializecss.com/navbar.html#navbar-fixed

For a Fixed Navbar, it says all that is needed is to "add an outer wrapping div with the class navbar-fixed"

I'll test the code you provided, perhaps the instructions are not completely clear.

[ProProPro1]

Then That Means That The Developers Didn't Document It Properly

[ProProPro1]

This Is How The Result Looks Like From My Code:

[ProProPro1]

http://materializecss.com/buttons.html

Their FAB-To-Toolbar Documentation Isn't Clearly Documented Aswell

[ProProPro1]

As You Can See The Code Of Their Documentation Site. They Don't Have The Side-Nav Inside Of The <nav> Either.

[tomscholz]

The Solution:

<header>
    <div class="navbar-fixed">
        <nav>
            <div class="nav-wrapper"> <a href="#!" class="brand-logo">Logo</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">
                    <li><a href="sass.html">Sass</a></li>
                    <li><a href="badges.html">Components</a></li>
                    <li><a href="collapsible.html">Javascript</a></li>
                    <li><a href="mobile.html">Mobile</a></li>
                </ul>
            </div>
        </nav>
    </div>
   <!-- Move the sidenav outside of .navbar-fixed -->
    <ul class="side-nav" id="mobile-demo">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
    </ul>
</header>

[darckyn]

I have the same error :(

[lastnoob]

Bump, this is an issue. Yeah you can work around it like mentioned before, but its bad for seo as @tomscholz said already

[developeranirudhprabhu]

@acburst @Dogfalo Can you check and close the ticket

[markimarc]

Still no fix for this?
This is really annoying when you have an one-page site.

[dkrish]

@tomscholz didn't seem to work for me at all, even when copied exactly on a new file. just turned off the overlay for now

[tomscholz]

@dkrish can you post a codepen with your code?

[oppenheimerm]

for now, this is my fix:

#sidenav-overlay {
    margin-left: 300px;
}

[ghost]

Here is a fix that I used:
#sidenav-overlay { z-index: 1; }

[Slimmmo]

I'm not sure if this is the same issue but I've been trying to use introjs inside the sidenav fixed and experiencing problems with the z-index that has brought me to this issue.

What I found was if I removed both the position: fixed and will-change: transform from the side-nav then it would work properly. Anyone else found the same thing?

[LeafHacker]

Hm, I thought I'd written another comment on this but it looks like it never sent.

When .side-nav is a child of .navbar-fixed, no matter what you set .side-nav's z-index to, it seems to be positioned within its parent .navbar-fixed.

This is the main cause of this bug.

The #sidenav-overlay and .navbar-fixed both share a z-index of 997. This is so that they are always above page content. Since the #sidenav-overlay is later in the markup, it goes above .navbar-fixed (which I believe is intended, since this places the overlay above the scrolling header).

Some people have suggested modifying the z-index of either .navbar-fixed or #sidenav-overlay so that .navbar-fixed is above #sidenav-overlay, however this would mean that the scrolling header would also be above the overlay. (See Comment 16).

Unless we find a work around for children of a fixed element with z-index set being positioned relative/within that parent (on the z axis, anyway), the only clean solution I can see is to ensure that .side-nav is not a child of .navbar-fixed. (As per Comment 5 and 6).

To those concerned about the ul.side-nav being outside of a nav element: We also can't move the .navbar-fixed > nav outside of .navbar-fixed because it is crucial to the materialize positioning, however you could create a seperate nav > .side-nav structure outside of .navbar-fixed if you like.

[bretonio]

Quite right — remove navbar-fixed and the issue goes away. And yes, the adjustment to #sidenav-overlay resolves the issue when the fixed navbar is switched on. So this has been a fruitful google and I thank you all.

[firanto]

@bretonio Or... You could just move the left-nav to the outside of fixed-nav div like solution on answer number 6 by @tomscholz ... 🤔

[precizie]

Hi guys!

This is the HTML fix no CSS or anything else, like @kurotsukikaitou says:

<div class="navbar-fixed">
    <nav class="blue" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="#" class="brand-logo">
                <div class="logo center-block"></div>
            </a>
            <ul class="right hide-on-med-and-down">
                <li><a id="" href="#">Link</a></li>
                <li><a id="" href="#">Link</a></li>
                <li><a href="#" target="_blank">Link</a></li>
                <li><a href="#" target="_blank">Link</a></li>
            </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>
    </nav>
</div>
<ul id="nav-mobile" class="side-nav">
    <li><a id="" href="#">Link</a></li>
    <li><a id="" href="#">Link</a></li>
    <li><a href="#" target="_blank">Link</a></li>
    <li><a href="#" target="_blank">Link</a></li>
</ul>

This issue can be closed.

[Dogfalo]

Please refrain from posting comments and pictures that do not pertain to the discussion.

[Dogfalo]

Documentation has been updated in 7d94806 to make the HTML placement more clear

[Thlenzi]

I'm using this after all .css called..

#sidenav-overlay {
background-color: rgba(0,0,0,0.0);
}

[DanielRuf]

This is not a solution imho.

[jeroenoverman]

The solution works for my link items in the sidenav. But I also have a div user-view to show the users name and logout button This user view is clickable but not shown correctly. See image and code below.
The user view is not clear..
Any thoughts?

  <nav class="blue darken-4" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="/" class="brand-logo center">TripKeeper</a>
      @auth
      <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="left hide-on-med-and-down">
        <li class="{{ Route::is('home') ? 'active' : null }}"><a href="/">Overview</a></li>
        <li class="{{ Route::is('trips.*') ? 'active' : null }}"><a href="/trips">Trips</a></li>
        <li class="{{ Route::is('fillups.*') ? 'active' : null }}"><a href="/fillups">Fillups</a></li>
        <li class="{{ Route::is('location.*') ? 'active' : null }}"><a href="/location">Location</a></li>
      </ul>
      <ul class="right hide-on-med-and-down">
        <a class="right-align" href="{{ route('logout') }}"
          onclick="event.preventDefault();
          document.getElementById('logout-form').submit();">
          Logout
        </a>
      </ul>
      @endauth
    </div>
  </nav>
</div>
@auth
<ul id="nav-mobile" class="sidenav">
  <li>
    <div class="user-view blue darken-1">
      <a><h5>{{Auth::user()->name}}</h5></a>
      <a class="right-align" href="{{ route('logout') }}"
          onclick="event.preventDefault();
          document.getElementById('logout-form').submit();">
          Logout
      </a>
      <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
        {{ csrf_field() }}
      </form>
    </div>
  </li>
  <li class="{{ Route::is('home') ? 'active' : null }}"><a href="/">Overview</a></li>
  <li class="{{ Route::is('trips.*') ? 'active' : null }}"><a href="/trips">Trips</a></li>
  <li class="{{ Route::is('fillups.*') ? 'active' : null }}"><a href="/fillups">Fillups</a></li>
  <li class="{{ Route::is('location.*') ? 'active' : null }}"><a href="/location">Location</a></li>
</ul>
@endauth

[oldManLemon]

Moving it out of the DIV works well, Ie if

<div class="navbar-fixed">{menu stuff} </div> <ul id='mobile' class="sidenav">{Menu again}</ul>

I feel the documentation should be updated to make note of this or reference this.

[tripp528]

I had this problem and tried all of these to no avail. I realized that I had changed the z-index of

to 1 for other reasons. Took it out, problem was solved! Maybe will help someone else.

[peppeg]

late 2018, problem still present and not documented!
Solution works 💃
thanks!

[DanielRuf]

late 2018, problem still present and not documented!
Solution works 💃
thanks!

0.x releases are not supported anymore. 1.x is the new release. Please create a new issue and a codepen which reproduces the issue.

[chrisAXZA]

The year is 2022: no gas, no fire wood, no complete Materialize documentation.
@tomscholz gratias !

[DanielRuf]

@chrisAXZA me and @tomscholz were simple contributors and had not many rights. The problem is with the current maintainers @Dogfalo and @acburst who did not want to work with us to bring things forward.

So some people (including me) created an actively maintained fork at https://github.com/materializecss/materialize, every contributor is very welcome there and longterm contributors get more rights there.

We tried once more to get the original maintainers involved (see materializecss#263) or at least get the ok to forward / link to us but as you can see at materializecss#263 this was without success.

[chrisAXZA]

Thanks for the response.

Unfortunate indeed, perhaps in the long-run a dedicated webpage comprising additional document (ie. materialize-documentation.io), which to be frank is non-existent on materializecss.com (a trivial sidenav issue demands the inquiry to an impressive amount of stackoverflow and github-issue pages).

Busy as they might be, also unfortunate that @Dogfalo and @acburst did not at least respond with regards to your inquiries.