Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – WordPress site designed with Elementor, pop up box in header pushing page right

I’ve spent the entire day trying to figure out how to fix this and I give up. Any help will be much appreciated. Here is the link to the site with the problem: dev.propadis.com

I’m building a WordPress site with page builder elementor. I’ve created the header with plugin elementor header footer builder. On the header is attached a button with a popup box. When I click the popup box the entire page at the back moves to the right, then moves back on closing the popup box.

Any idea why?

Tags:

2

Answers


  1. 0

    When the pop up box opening the style: “padding-right:0” is adding to your body from a js file.

    Additionally a class named modal-open is adding to your body classes.

    I think you should add the following jQuery code in your theme:

    jQuery('.modal-open').css('padding-right', 17 + 'px');

    (you can add it inside a ) in the head of your theme)

    Login or Signup to reply.
  2. 0

    For WordPress, this solution worked for me, so far. I’m using PopBox and Elementor/Elementor-Pro.

    Note: Do testing in regular browser tabs. Some developer responsive views may not have normal scrollbars.

    In the theme’s style.css, add:

    html.modal-open {
    /* All of this stops the page from scrolling in the background */
    -ms-overflow-style: scrollbar;
    overflow: hidden;
    height: 100%;
}

body.modal-open {

  /* This is the crucial rule to get rid of the page shift when opening a modal.*/
  /* Also, try 'auto' if you have issues ie mobile vs desktop. */
  overflow: hidden !important;

  /* You may want to explore toggling this, depending on your circumstances (page length and/or presence of page scroll bars) */
  height: 100%;
}

    In the theme’s scripts, add:

    jQuery(document).ready(function($) {

    /* The following adds/removes classes to <html> accordingly */

    $('#mypopup').on('show.bs.modal', function (e) {
        $('html').addClass('modal-open');
    })

    $('#mypopup').on('hide.bs.modal', function (e) {
        $('html').removeClass('modal-open');
    })

});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search