Is not working with Twitter Bootstrap's NavBar component

[roylee0704]

NavBar component is overlaying/hiding the nprogress bar, It would be nice if we could show nprogress on top of NavBar, when activated. Probably via css: z-index.

[caarlos0]

Yes, it is.

I created this lib for rails, if you look at the files, you will see this fix for this issue.

I believe that this should be a customization, not a part of the core lib. Maybe cite it in readme.

Hope it helps. Cheers.

[lipis]

On the other hand I think the z-index could be added in the core.. since it's a kind of component that needs to be on the top out of the box. If someone wants to added in a different place, they already going to edit it so they will figure out to remove the z-index if needed..!

[timwis]

I use a static navbar at the top of my page and offset the NProgress bar by 50px so it shows at the bottom of the navbar. If the z-index is 99999, it shows above the navbar and there's a strange diagonal line following it. So in my case it's better that it's not in the core.

[lipis]

You are right...

[rstacruz]

I'd happily bump up the z-index in the official distribution, especially if it makes it play well with a well-used library like Bootstrap. The diagonal line issue is a bummer, though — any help on finding alternate solutions would be appreciated.

[fedmich]

@caarlos0 Your link already changed. it's now https://github.com/caarlos0/nprogress-rails/blob/master/app/assets/stylesheets/nprogress-bootstrap.css

Anyway, let me put the code here for others

#nprogress .bar,
#nprogress .spinner {
    z-index: 999999;
    }

[trevorlloydelliott]

You may also want to hide the spinner when the responsive navbar shows its dropdown button or they will overlap.

@media (max-width: 767px) {
    #nprogress .spinner {
        display: none;
    }
}

[pamanes]

fedmich and Moozhe you saved me from long hours today!!! thanks!