Materialize: Fixed navbar

[murliatdure]

• Looking for some utility class that considers the fixed navbar feature

Simply applying position-fixed is working but the color pallete and all others are getting disturbs.

[murliatdure]

.nav-fixed {
position: fixed;
z-index: auto !important;
}

Still not working.
Seems to be NAVBAR-FIXED with Material Color Pallete, does't fit !!

[cofcoder]

Try adding this CSS to your custom CSS file:

body{
    padding-top: 45px;
}

.nav-fixed{
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}

.nav-fixed {
top: 0;
}

@media (min-width: 768px)
.nav-fixed{
border-radius: 0;
}

I have used it time and time again from previous Bootstrap projects and there has been no issues (fingers crossed) I hope it works for you too!

[carlosperate]

The CSS from tmd-uk fixes the navbar to the top. However, the z-index needs to be set a bellow a 1000 to allow things like tooltips and menus to cover the bar (I found a z-index of 2 to be enough). The other problem that I experience is that any z-value added to the "nav" tag will cause the side menu to be covered by the "shade" as shown in the screenshot below.

[murliatdure]

Thanks

[carlosperate]

@murliatdure any chance we can get the issue listed in my responsed looked into? The latest version in the bin folder still causes the menu to be shaded as shown in my screenshot.

[Dogfalo]

If you set the z-index it should be at least 999

[carlosperate]

A z-index of 999 or above will cause the navbar to not be shaded:

A z-index below 999 will shade everything as shown before.
Is there any workaround to fix this?

[aminnairi]

Moving the <ul class="side-nav"> outside the <div class="navbar-fixed"> does fix the issue without touching the CSS

CodePen Demo