When you open an embedded PDF in full-screen mode, does your theme’s navigation bar or header appear on top of the viewer? This is usually a CSS stacking order conflict. Your theme’s header has a higher z-index than the PDF Embedder full-screen overlay, so it renders on top.
This guide shares a small CSS snippet that is needed to fix it.
Fixing the z-index conflict
The PDF Embedder full-screen overlay uses the CSS class .pdfemb-fsp-wrapper. Add the following CSS to push it above your theme’s header:
.pdfemb-fsp-wrapper {
z-index: 999999 !important;
}
Code language: CSS (css)If the header still appears over the viewer after applying this, increase the number. Some themes use very high z-index values for sticky headers. Inspect the header element in your browser’s developer tools to see its current z-index value, then set .pdfemb-fsp-wrapper higher than that.
Adding the CSS to your site
Method 1: WordPress Customizer (recommended for most users): Go to Appearance > Customize > Additional CSS, paste the snippet, and click Publish.
Method 2: Child theme stylesheet: Add the CSS to your child theme’s style.css file. Using a child theme prevents the change from being lost during theme updates.