Materialize: 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?

[oppenheimermd]

for now, this is my fix:

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

[ghost]

Here is a fix that I used:
`

sidenav-overlay {

z-index: 1;

}
`

[tomscholz]

@BraxtonFair Your solutions works poorly.

[ptmaroct]

So, I fixed this.

.navbar-fixed {
z-index: 999;
}

Yes, that's it. The default value of z-index is 998 or something. Change that to 999 and you're good to go.

[tomscholz]

@ptmaroct This is results in this:https://github.com/Dogfalo/materialize/issues/3844#issuecomment-291022165

[GoldenSlam]

I ended up just changing the left style from 0 to 300px:

#sidenav-overlay {
   left: 300px;
}

[asmeikal]

The issue is related to the fact that when dealing with nested elements, it prevails the z-index of the parent, here is an example.

In v0.97.7 .navbar-fixed had a z-index of 998 and .sidenav-overlay was set to 997, so both the fixed navbar and the sidenav were displayed on top of the overlay (so the result is what @tomscholz showed in https://github.com/Dogfalo/materialize/issues/3844#issuecomment-291022165). This shows v0.97.7 behaviour.

In v0.97.8 the z-index of both the fixed navbar and the overlay was set to 997, and the overlay gets displayed on top both fixed navbar and sidenav. This shows v0.97.8 behaviour.

A possible workaround is appending the overlay to the parent of the sidenav, instead than to the body. I haven't throughout tested it though, it could cause problems if the navbar is not fixed.

[hyorkim11]

#sidenav-overlay { z-index: 1; }
worked for me PERFECTLY. thanks!

[DanielRuf]

Wasn't this solved by moving the sidenav ul outside of its wrappers?

In this case we just have to document this and provide the right examples.

[koushikmln]

what is the current and best fix for this?

[LeafHacker]

@koushikmln The current workaround is in comment 6. The one with 25 :+1:, 6 :tada: and 4 :heart:...

[Badlapje]

The same fix also works to implement a mobile navbar paired with a dropdown. Same disadvantages too: still need to override the z-index of the sidenav-overlay to 1 and seo is affected.

[DanielRuf]

@Badlapje how is SEO affected by this?

@tomscholz the problem with the overlay is the issue where so far your solution works (moving the nav outside of its wrappers).

Should we either fix the z-index values or update the docs with the wrapper solution?

[LeafHacker]

It probably makes more sense to fix the underlying z-index issue, unless that causes bigger issues.

I assume that way .side-nav would work correctly both within and outside of .navbar-fixed?

In an ideal world, we wouldn't need two <ul>s for this, since from a markup perspective it makes little sense to duplicate the nav list.

[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 7d94806e47695bd796cc3ebab0c4b792d766c778 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?

```

TripKeeper
@auth
menu

• Overview


• Trips


• Fillups


• Location

onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout

@endauth

@auth

• {{Auth::user()->name}}

  Logout

  {{ csrf_field() }}
• Overview
• Trips
• Fillups
• Location

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