How do I handle z-index stacking issues between navbar, modal, and offcanvas?

Asked on Aug 02, 2025

1 Answer

In Bootstrap 5, handling z-index stacking issues involves understanding the default z-index values for components like the navbar, modal, and offcanvas. You can adjust these values using custom CSS to ensure the correct stacking order.

<!-- BEGIN COPY / PASTE -->
        <style>
            .custom-navbar {
                z-index: 1040; /* Default for navbar */
            }
            .custom-modal {
                z-index: 1050; /* Default for modal */
            }
            .custom-offcanvas {
                z-index: 1060; /* Default for offcanvas */
            }
        </style>

        <nav class="navbar custom-navbar bg-light">
            <!-- Navbar content -->
        </nav>

        <div class="modal custom-modal fade" tabindex="-1">
            <!-- Modal content -->
        </div>

        <div class="offcanvas custom-offcanvas offcanvas-start">
            <!-- Offcanvas content -->
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The default z-index values for Bootstrap components are: navbar (1040), modal (1050), and offcanvas (1060).
Adjust these values in custom CSS if you need to change their stacking order.
Ensure that the component with the highest z-index value appears on top.
Use classes like 'custom-navbar', 'custom-modal', and 'custom-offcanvas' to apply your custom styles.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions