Pop ups hidden behind page header

  • Resolved TheBatman

    (@thebatman)


    2 years, 4 months ago

    I’m quite happy with MailPoet except for one problem.
    With pop up forms, the top of the form can be stuck behind the page header/navigation. You have to scroll down to be able to close the pop up.

    How can I move the pop up to be in front of EVERYTHING on page, including the header?

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Ojoma a11n

    (@geraltrivia)

    Hello @thebatman ,

    Thank you for reaching out to us.

    Can you kindly let us know the name of your website so we can view the popup and inspect its code?

    Looking forward to hearing from you.

    Have a great day!

    Thread Starter TheBatman

    (@thebatman)

    Sure thing, here’s the link: https://megapencil.co/10-amazing-examples-of-braided-hair-art/

    The ad is set to pop up after 30 seconds or page leave intent. If you stay scrolled to the top you’ll see the overlap.

    • This reply was modified 2 years, 4 months ago by James Huff.
    • This reply was modified 2 years, 4 months ago by Jan Dembowski. Reason: Short link expanded
    Thread Starter TheBatman

    (@thebatman)

    Hi, do you have any more insights into this issue?

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there @thebatman,

    We’ve seen similar issues on certain themes based on how the headers / menus are handled.?

    Please try adding this JavaScript snippet to move the form to the body element of the page instead, and it should resolve the layering issue with the header/menu. You can use a plugin like Simple Custom CSS and JS and set the snippet to load in the footer of the page.

    
jQuery(document).ready(function( $ ) {
    jQuery("#mp_form_popup6").detach().appendTo("body"); 
});

    I’ve changed the ID to mp_form_popup6 to match the popup on your form. If you have any additional forms, you’ll need to duplicate the snippet and adjust the ID for each one.

    Please let me know how that goes, or if you have any questions!

    Thread Starter TheBatman

    (@thebatman)

    That did the trick! It pops up over the header now just like I needed.
    Thanks!

    • This reply was modified 2 years, 4 months ago by TheBatman.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Pop ups hidden behind page header’ is closed to new replies.