Back to Community
Home / Community / Theme → Phlox

Fixing Z-Index Issues: Keeping Your Bootstrap Modal on Top of the Phlox Theme Header

15 threads Sep 9, 2025 Theme → Phlox

Content

If you're using the Phlox theme alongside Bootstrap modals, you might encounter a frustrating issue: the site header appears on top of your modal, obscuring its content. This guide will explain why this happens and provide the most effective solutions to ensure your modals always have top priority.

Why Does This Happen?

This conflict occurs due to the CSS z-index property, which controls the stacking order of elements on a webpage. Elements with a higher z-index value appear in front of elements with a lower one. The Phlox theme's header often has a high z-index value to ensure it remains visible while scrolling. If this value is higher than the z-index assigned to your Bootstrap modal, the header will render on top of it.

Common Solutions

Solution 1: Adjust the Z-Index via Custom CSS

The most straightforward fix is to assign a higher z-index value to the Bootstrap modal and its backdrop. You can add this custom CSS through the WordPress Customizer (Appearance > Customize > Additional CSS).

.modal {
    z-index: 999999 !important;
}
.modal-backdrop {
    z-index: 999998 !important;
}

Note: The use of !important is often necessary to override the theme's existing styles. The extremely high values (999999) are chosen to surpass almost any other element on the page.

Solution 2: Inspect and Target the Header

If the first solution doesn't work, the header might have a complex structure. Use your browser's developer tools (right-click the header and select 'Inspect') to identify the specific header element with the high z-index. You may need to target a more specific class, such as .aux-sticky or .aux-header, and give it a lower value.

.aux-header.aux-sticky {
    z-index: 100;
}

Solution 3: Verify Modal Structure

Ensure your Bootstrap modal is placed correctly in the DOM (Document Object Model). It should be a direct child of the <body> tag. If it's nested within another element with a low z-index or other positioning issues, it may not appear correctly regardless of its own z-index value.

Conclusion

Z-index conflicts between theme components and third-party libraries like Bootstrap are common. By using custom CSS to carefully manage the stacking context, you can resolve this issue and ensure your modals function as intended. If problems persist, using browser inspection tools to debug the exact stacking order is the recommended troubleshooting step.

Related Support Threads Support