Hello NeilJc,

yes, it possible.

• First of all, create the homepage or index page of your website.
• Second, go to the homepage at bottom right (Header visibility and transparency) and select Transparent & Glassy Header from drop down menu. Don’t forget to put the update button. See the link http://imgur.com/a/UeQEf
• Third, create a slider with photos and contents.
• Finally, you can put some CSS code. Go to Enfold Theme Options -> General Styling -> Quick CSS and put that code for add grey border bottom

#top .av_header_glassy.av_header_transparency #header_main {
    border-color: transparent;
    border-bottom-color: rgb(125, 125, 125);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

Thank you. I hope this may help you.

Guys i told you the issue exists. As much as I appreciate the awesome support of Kriesi’s crew this time they are simply wrong. Nobody seems to listen. The ONLY solution is the one I provided. The CSS hack and the image regeneration lead are wrong and will even cause more issues! So either stay with woo 2.6.14 or update to 3.0 in combination with my solution.

@dandelion222 this is by default in Enfold because the lightbox function is missing the .gallery class in the groups property. The script tries to catch the closest group (css class) wrapped around the image that has been clicked on. Unfortunately without .gallery this is .post-entry. The jQuery script will than pick up all images within the div with class .post-entry. You can verify this by adding some more single images to the post content. They all will appear in the gallery popup.

If you have a child theme you could use a monkey patch in a custom jquery script:

(function($){

    var _old_avia_lightbox = $.fn.avia_activate_lightbox;
    $.fn.avia_activate_lightbox = function( variables ){
    if ( ! variables ) {
        var variables = {};
    }

    variables.groups = ['.gallery', '.avia-slideshow', '.avia-gallery', '.av-instagram-pics', '.portfolio-preview-image', '.portfolio-preview-content', '.isotope', '.post-entry', '.sidebar', '#main', '.main_menu'];

    return _old_avia_lightbox.call( this, variables );

    };

})(jQuery);

Put the code above in a file called mmx.js and put the file in the child theme directory. In the functions.php file of your child you would than add the following lines:

add_action( 'wp_enqueue_scripts', 'mmx_load_scripts', '99' );
function mmx_load_scripts() {
    wp_enqueue_script( 'mmx', get_stylesheet_directory_uri() . '/mmx.js', array( 'jquery', 'avia-default' ) );
}

@ismael, @john please forget about the CSS. This is NOT the problem and it does not solve the main issue. I have described the problem in detail here and recommended a solution for your developers here.

If you need more information just tell Kriesi to contact me. Again: the core issue for the missing image in enfold will not be fixed with any woocommerce update (at least according to my conversation with Mike Jolley) because the filter hook used in Enfold to display the image does not exist anymore.

Hi Guys!

There is a quick solution from Ismael for this:

https://kriesi.at/support/topic/masonry-gallery-not-working-2-2/#post-771510

Best Regards,
Nic