Fix iHomefinder/Optima Express Beaver Builder Bootstrap Conflict

The Options below outline the process for fixing the iHomefinder/Opitima Express & Beaver Builder Bootstrap conflict which causes issues with mobile styling/formatting. Typically Step 1 is all that is necessary to resolve the issue but further steps may be necessary to fully fix any conflicts.

NOTE: Please complete all steps below before opening a clarification.

Option 1

Download and install/activate the Theme Customizations plugin. For more information on this Click Here

Add the following code to functions.php file of the Theme Customizations plugin.

// Dequeuing bootstrap from the BB theme due to conflict with Optima Express IDX Plugin function remove_bb_bootstrap() { wp_dequeue_script('bootstrap'); } add_action( 'wp_enqueue_scripts','remove_bb_bootstrap',1000);

Option 2

Add the following CSS using WordPress Dashboard > Optima Express > Configuration > CSS Override:

#ihf-main-container .carousel-control {
   height: auto;
   background: none;
   border: none;
}
#ihf-main-container .carousel-caption {
    background: none;
}
#ihf-main-container .modal {
    width: auto;
    margin-left: 0;
    background-color: transparent;
    border: 0;
}
.ihf-results-links > a:nth-child(1) {
    display: none;
}
#ihf-main-container .modal-dialog {
    left: 0% !important;
}

Option 3

If the above Options are not working, please remove the script add in Option 1 and add the following script as outlined below:

Add this script using WordPress Dashboard > Optima Express > Configuration > CSS Override. Be sure to place the code outside of any style tags that already exist in the CSS override:

<script>
(function () {
    "use strict";
    jQuery.getScript("/wp-content/plugins/optima-express/js/bootstrap-libs/bootstrap.min.js");
}());
</script>