Back to Community
Home / Community / Theme → Oceanwp

How to Fix a Vertical Header Covering Lightbox Arrows in OceanWP

15 threads Sep 11, 2025 Theme → Oceanwp

Content

Many OceanWP users who opt for a stylish vertical header encounter a common issue: the header overlaps the left navigation arrow in their site's lightbox. This guide explains why this happens and provides the most effective solutions to fix it.

Why This Happens

The vertical header layout positions the navigation on the left side of the screen. By default, this element has a high z-index value to ensure it sits above other page content. Lightbox navigation arrows are often positioned at the far edges of the viewport. When these two elements occupy the same space, the header's higher stacking context causes it to cover the arrow, making it difficult for users to navigate through a gallery.

Common Solutions

1. Adjust the Lightbox's Z-Index with CSS

The most straightforward fix is to use custom CSS to increase the z-index of the lightbox elements, forcing them to appear above the vertical header. You can add the following code in your WordPress Customizer under Appearance > Customize > Custom CSS/JS > CSS Code.

.mfp-wrap, .mfp-container {
    z-index: 999999 !important;
}

Note: The exact CSS selector might vary depending on the lightbox script your site is using (e.g., WordPress's default, a plugin, or OceanWP's). You may need to use your browser's inspector tool to identify the correct class names for your specific setup.

2. Reposition the Lightbox Arrows

If changing the z-index causes other issues, an alternative is to move the arrows away from the edge so they are no longer hidden behind the header. This CSS code adds a left margin to the left arrow, pushing it into view.

.mfp-arrow-left {
    margin-left: 200px !important; /* Adjust this value based on your header's width */
}

3. Consider a Custom Header for Granular Control

For complex design requirements, creating a custom header offers the most flexibility. The OceanWP documentation provides a guide on how to create a custom header. With a custom header, you can precisely control its width, position, and stacking context to prevent conflicts with other page elements like lightboxes.

Conclusion

A vertical header overlapping lightbox elements is a typical CSS stacking context issue. The solutions above, particularly adjusting the z-index, should resolve the problem for most users. For more advanced layout control, exploring the custom header option is recommended.

Related Support Threads Support