Divi Mobile Snippet - Blur the background when the Divi Engine style menu is open

de-mobile_blur_background.css

/* Add a blur effect when the Hamburger Menu is open */

/* Target the element with ID 'page-container' when the parent element has class 'show-menu' */
.show-menu #page-container {
    /* Apply a 10-pixel blur effect to the element */
    -webkit-filter: blur(10px); /* For WebKit browsers (e.g., Safari) */
    -moz-filter: blur(10px);    /* For Mozilla browsers (e.g., Firefox) */
    -o-filter: blur(10px);      /* For Opera browsers */
    -ms-filter: blur(10px);     /* For Microsoft browsers (e.g., Internet Explorer) */
    filter: blur(10px);         /* Standard filter property for modern browsers */
    
    /* Apply a transition effect when changing the element's properties */
    -webkit-transition: all 0.5s ease; /* For WebKit browsers (e.g., Safari) */
    transition: all 0.5s ease;         /* Standard transition property for modern browsers */
}