Hi,
Sorry for the late reply and thanks for the login, I researched your error /wp-content/plugins/woocommerce/packages/woocommerce-admin/src/Loader.php and found this woocommerce thread were the woocommerce support explains what it is and how to correct:

It sounds like there is a product remnant in your database that was not properly deleted. Search your database for butterbean and purge any entries.

and their final advice was:

Your errors are php notices only. They will not interrupt any functionality and should not display to begin with. You can hide them completely by adding this to your wp-config.php :

define( 'WP_DEBUG', false );
define( 'WP_DEBUG_DISPLAY', false );

I see that WP_DEBUG is enabled on your site, so you can try purging your database or disabling WP_DEBUG.

I also researched the Loader.php file and the errors are pointing to the woocommerce header being created and adding admin body classes, so this seems to point to something clashing with this. I see that you have many premium woocommerce plugins so I suspect one of these, have you tried disabling your plugins and clearing your cache one at a time to find the error?

Since this is a “notice” for admin users I would say it is safe to follow the woocommerce support recommendation and disable your WP_DEBUG

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
We are happy to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
Sorry for the late reply and thanks for the login, I took a look at your page and added this css in your WordPress > Customize > Additional CSS field:

@media only screen and (min-width: 1440px) { 
	#top.page-id-2524 #main > div.container_wrap_first.container_wrap > div {
		width: 73% !important;
		float: left !important;
        max-width: 1350px !important;
	}
	#top.page-id-2524 #main > div.container_wrap_first.container_wrap {
		width: 90% !important;        
		margin: auto !important;
	}
	#top.page-id-2524 #wrap_all #main .sidebar {
        width: 352px !important;
	}
	#top.page-id-2524 #main > div.container_wrap_first.container_wrap > div > main {
		 width: 100% !important;
	}
}

I also found that your inner page height didn’t match your content height so I added this script to your functions.php

function custom_script(){
  ?>
  <script>
(function($){
  $(window).load(function(){
      var s1 = $('#top.page-id-2524 #main > div.container_wrap_first.container_wrap > div ').height();
    var s2 = $('#top.page-id-2524 #main > div.container_wrap_first.container_wrap').height();

    if (s1 > s2)
        $('#top.page-id-2524 #main > div.container_wrap_first.container_wrap').css('height', s1 + "px");
    else
        $('#top.page-id-2524 #main > div.container_wrap_first.container_wrap > div').css('height', s2 + "px");
  });
  })(jQuery);
  </script>
<?php
}
add_action('wp_footer', 'custom_script');

please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry for the late reply, please excuse me while I try to catch up on your thread, I believe I have found the correct page, linked in the Private Content area, I see that this:

 #top .sticky_placeholder {
    display: none;
  }

is hiding the yellow line but I believe what you should use is this css to remove the white space above the yellow line on mobile.

@media only screen and (max-width: 987px) { 
	#top.page-id-291 .sticky_placeholder {
		height: 0 !important;
	}
}

Please note that this is for the one page only, for now.
I also see that you have two sub-menus, one with a button menu, the other with a menu, so to have the first sub-menu sticky I enabled the “Sticky Submenu” option and now it is sticky at the top until you scroll, which the second sticky menu rolls over it and sticks to the top. This is the correct behavior, one sub-menu sticks to the top until the next one is scrolled to the top, please see this demo page for reference.
Please note that for testing this I disabled the “admin toolbar” in the user profile (kstm), because the toolbar covers some of the sticky sub-menu and your visitors do not see the admin toolbar.
Please see the animated gif in the Private Content area.
So I assume that this is still not quite the way you want it, please explain how you would like this to be.

Best regards,
Mike

Hi,
Glad it helps, on your other pages the pagination looks like this:

and on the page we are working on I see this:

Where do you see “1 of 5”, “2 of 5”, “3 of 5” ?
In the script above for the pagination links you can change the number “2” to “2 of 5”, for example, like this:

function custom_pagination(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
	var url = document.URL;
	var theURL = url.split("page")[0];
  	$new_pagination = '<nav class="pagination"><a href="'+theURL+'" class="p1">1 of 5</a><a href="'+theURL+'page/2/" class="p2">2 of 5</a><a href="'+theURL+'page/3/" class="p3">3 of 5</a><a href="'+theURL+'page/4/" class="p4">4 of 5</a><a href="'+theURL+'page/5/" class="p5">5 of 5</a></nav>'
if ($("body").is('.page-id-5480')){
	$( "nav.pagination" ).replaceWith( $new_pagination );
} else {}
$('#top:not(.paged-2):not(.paged-3):not(.paged-4):not(.paged-5) .pagination .p1').addClass('current');
$('#top.paged-2 .pagination .p2').addClass('current');
$('#top.paged-3 .pagination .p3').addClass('current');
$('#top.paged-4 .pagination .p4').addClass('current');
$('#top.paged-5 .pagination .p5').addClass('current');
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_pagination');

But this will change the size of your pagination, and not match the rest of your site.
Am I understanding correctly?

Best regards,
Mike

Hi,
Please include an admin login in the Private Content area so we can take a look, or export your slider and upload to DropBox so we can check.

Best regards,
Mike

Hi,
It is the same html code, I replaced mine with yours like this:

Please check the example page below again.

Best regards,
Mike

Hi,
As I understand your opening post, the reason you were having issues with the solution in the other thread, is because you want it to work on one page only and you want the pagination to display the highlighting for the current page, I adjusted the previous solution to achieve both of these.
Please clear your browser cache and check.
This is the new script:

function custom_pagination(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
	var url = document.URL;
	var theURL = url.split("page")[0];
  	$new_pagination = '<nav class="pagination"><a href="'+theURL+'" class="p1">1</a><a href="'+theURL+'page/2/" class="p2">2</a><a href="'+theURL+'page/3/" class="p3">3</a><a href="'+theURL+'page/4/" class="p4">4</a><a href="'+theURL+'page/5/" class="p5">5</a></nav>'
if ($("body").is('.page-id-5480')){
	$( "nav.pagination" ).replaceWith( $new_pagination );
} else {}
$('#top:not(.paged-2):not(.paged-3):not(.paged-4):not(.paged-5) .pagination .p1').addClass('current');
$('#top.paged-2 .pagination .p2').addClass('current');
$('#top.paged-3 .pagination .p3').addClass('current');
$('#top.paged-4 .pagination .p4').addClass('current');
$('#top.paged-5 .pagination .p5').addClass('current');
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_pagination');

Best regards,
Mike

Hi,
The masonry calculates the height of the entry in a script after the page load and sets absolute values for the grid and the “figcaption” is an inner container of the “figure” container. So even moving the “figcaption” container out of the “figure” container and then try to adjust the height of the entries doesn’t help because of the absolute values each entry has which to change would be a major re-write of the script.
But looking at your mockup I believe you could try using the “flexible masonry” styling option and then upload your images with a black section below your images for the text to show over. the “flexible masonry” styling option doesn’t crop the images.

Best regards,
Mike

Hi,
When I use the HTML layer the video shows the YouTube iframe, please see the example link in the Private Content area.
This slider is using the default skin, no settings were changed.

Best regards,
Mike

Hi,
Glad to hear this helps, shall we close this then?
I will take a look at your other thread.

Best regards,
Mike

Hi,
Glad to hear it’s sorted out now, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
Unfortunately, if you use the “video” layer in your slider the layerslider creates it’s own div to display the thumbnail that it grabs and placing a button over it, it is not using the YouTube iframe.

So your options are to use css to create a button you like, or use a custom image, or use the “HTML” layer to display the YouTube iframe code.

The layerslider does have a “no skin” mode, go to the Slider Settings, choose the Appearance tab. The first parameter will be the Skin, choose “no skin”

but this will not change the video element for the reasons above, but it does remove other styles you may like to remove.

While I was investigating I reverse-engineered some of the other skins css solutions for the video play button, you may find this helpful as a starting place for your custom css, if you choose that path.

.ls-playvideo {
	width: 50px;
	height: 50px;
	margin-left: -29px;
	margin-top: -29px;
	background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
	border: 2px solid rgba(255, 255, 255, 0.7);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.ls-playvideo:before {
	position: absolute;
	top: 16px;
	left: 20px;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 14px;
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.8);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	content: "";
}

.ls-playvideo:hover:before{
	border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}

.ls-playvideo:hover {
	background: rgba(0,0,0,1);
	border: 2px solid rgba(255, 255, 255, 1);
}

Best regards,
Mike

Hi,
Perhaps, what did the critical error say?

Best regards,
Mike