Progress bar appears behind sticky navbar despite higher z-index – expected behavior? #159
Description
Description
Hi, thank you for building this great library!
I'm using @bprogress/next 3.2.12 in a Next.js 15 project, and I've encountered an issue where the progress bar is rendered behind my sticky navbar — even though the progress bar has a significantly higher z-index than the navbar.
I'm not sure if this is a bug or if I'm missing something in my setup, so I wanted to open this issue for clarification and guidance.
✅ Expected Behavior
The progress bar should appear above all page content, especially sticky/fixed navbars, since it uses a very high z-index (99999 by default).
❌ Actual Behavior
The progress bar is rendered under my navbar, even though the navbar only has z-index: 50.
🧪 Minimal Reproducible Example
Provider setup (in app/providers.tsx)
"use client";
import { ProgressProvider } from "@bprogress/next/app";
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ProgressProvider
color="#FF0000"
startOnLoad
options={{ showSpinner: false, indeterminate: true }}
shallowRouting
>
{children}
</ProgressProvider>
);
}Used in root layout
// app/layout.tsx
import "./globals.css";
import { Providers } from "./providers";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}Navbar component
<nav className="sticky top-0 z-50 w-full border-b bg-background">
{/* Navbar content */}
</nav>🔬 What I’ve Tried
- Confirmed that
.bprogress .barisposition: fixedwithz-index: 99999 - Ensured no
backdrop-filter,filter,transform, orisolation(to avoid accidental stacking context) - Tried applying
!importantto.barz-index and position - Verified that
.baris rendered before<nav>in DOM order - Even stripped the navbar down to just a
sticky+z-50+ background, and issue still persists
💡 My Guess
Could this be a DOM order / stacking context issue where the progress bar is rendered too early in the document, before the navbar?
Would rendering .bar with a portal (ReactDOM.createPortal) to the end of <body> help ensure it’s always on top?
🧠 Environment
@bprogress/next: 3.2.12- React: 19.0.0
- Next.js: 15.3.3
- Browser: Microsoft Edge
🙏 Final Notes
Thanks in advance for looking into this! I’d appreciate any clarification — whether this is intended behavior or if there’s a better way to ensure the progress bar always overlays navbars.
If you think this is a bug, I'm happy to assist with further testing or provide a repo.
Thanks again!
Code example
No response
Package used (or docs)
@bprogress/next v3.2.12
Additional context
No response