Hi,

For nested sub menus, you will have to do this modification.

// https://kriesi.at/support/topic/accessibility-issue-for-menu-with-sub-items-of-sub-items/#post-1296178

Or add this code instead.

currentLink.on('focus', function () {
						sublist.stop().css({ visibility: 'visible' }).animate({ opacity: 1 });
						currentItem.css("z-index", 1000);

						sublist.find('li:last-child').on('focusout', function () {
							var parent = sublist.parent(".menu-item");
							var nextMenu = parent.next();
							var submenu = $(this).parent(".sub-menu");

							if(nextMenu) {
								nextMenu.trigger("mouseenter").focus();
								submenu.stop().animate({ opacity: 0 }, function () {
									submenu.css({ visibility: 'hidden' });
								});
								return;
							}

							sublist.stop().animate({ opacity: 0 }, function () {
								sublist.css({ visibility: 'hidden' });
							});
						});
					});

Best regards,
Ismael

Hi,

Thank you for the update.

1-2.) We have found out that the fts_instagram shortcode is the causing the layout issue. We saved the content of the page as template, applied it to a draft page (see private field) and removed the fts_instagram shortcode. The content within the tab section displayed correctly after removing the shortcode. You may need to contact the plugin authors for additional assistance or use a different instagram plugin.

3.) We checked the site on Chrome and Firefox. Please check the screenshot below.

Screenshot: https://postimg.cc/gallery/5J4W3S8/3813816e

4.) What is the font that you are using? It is possible the font weight 900 is not available for that font.

Best regards,
Ismael

Hey karinorage,

Thank you for the inquiry.

What is the actual model of the tablet device that you are using? The mobile menu icon will display when the screen width is less than 991px, but some tablet device is now wider or have a higher screen resolution, so the default menu will still be visible on those devices.

We could use the following css to adjust the mobile menu breakpoint or to force the mobile menu to display when the screen width is less than 1366px, which should cover tablet devices with high screen resolutions such as iPad Pro.

@media only screen and (min-width: 768px) and (max-width: 1366px)
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
        display: block;
    }

    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
        display: none;
    }
}

Best regards,
Ismael

Hey Ralph,

Thank you for the inquiry.

Did you set the background attachment to “fixed”? This might be causing the issue on mobile devices. We tried to inspect the site but it is not loading properly on our end. We may need to login to the dashboard first. Please post the admin account info in the private field.

Best regards,
Ismael

Hey Lautho2011,

Thank you for the inquiry.

Most browser have mobile device emulators, which allow you to display a site on a resized view port and check it as if you are using a smaller device.

// https://developer.chrome.com/docs/devtools/device-mode/#viewport

You can also use the following tool to check the mobile friendliness of the site.

// https://search.google.com/test/mobile-friendly?id=VsWo5yrnl83-V6Kn7PbyAA

Best regards,
Ismael

Hi,

It works on Firefox/Dev when we remove the -webkit-transform-style property and use the following css code, but this will also break the slider because it relies on the transform property to move the sliders.

.avia-mozilla .avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"] > ul > li {
	transform: none !important;
}

Looks like the Firefox developers were not planning on fixing this based on the thread that @guenter posted above.

There was a discussion [1] that involved all major browser vendors, including Chrome, which resulted in a consensus to change the spec [2] to treat background-attachment:fixed inside a transform as if it was background-attachment:scroll.

Best regards,
Ismael

Hey Rob,

Thank you for the inquiry.

For the mega menu, you have to modify the /enfold/js/avia-snippet-megamenu.js file, around line 175, look for this code..

//bind event for mega menu
			megaItems.each(function(i){
				$(this).on('mouseenter', 
					function()
					{
						delayCheck[i] = true;
						setTimeout(function(){megaDivShow(i); },options.delay);
					}).on('mouseleave',
					function()
					{
						delayCheck[i] = false;
						setTimeout(function(){megaDivHide(i); },options.delay);
					}
				);

Replace it with:

//bind event for mega menu
			megaItems.each(function(i){
				$(this).find("a").on('focus', 
					function()
					{
						delayCheck[i] = true;
						setTimeout(function(){megaDivShow(i); },options.delay);
					}).on('blur',
					function()
					{
						delayCheck[i] = false;
						setTimeout(function(){megaDivHide(i); },options.delay);
					}
				);

				$(this).on('mouseenter', 
					function()
					{
						delayCheck[i] = true;
						setTimeout(function(){megaDivShow(i); },options.delay);
					}).on('mouseleave',
					function()
					{
						delayCheck[i] = false;
						setTimeout(function(){megaDivHide(i); },options.delay);
					}
				);
			});

Please toggle or temporarily disable the Enfold > Performance > File Compression settings after doing the modificaiton.

Best regards,
Ismael

Hi,

Glad to know that it is working correctly now. To create a shop page, you will need a plugin such as Woocommerce. The plugin has a setup wizard, so you should be able to start a shop page in no time. Please check their documentation for additional info.

// https://docs.woocommerce.com/document/woocommerce-setup-wizard/

Best regards,
Ismael

Hey Cordell,

Thank you for the inquiry.

1-2.) The content of the first tab is at the very bottom of the container. You may need to set the tab section’s Layout > Content height to the second option (Auto adjust to content). And make sure that the Styling > Alignment > Vertical Align settings of each tab is set to Top or Middle.

3.) All videos worked correctly when we checked the page. Is this fixed? You may have set the Privacy & Cookies > Cookie Handling > Default Cookie Behavior settings to the third or fourth option, which disallow or block external scripts including videos on page load.

4.) Did you enable the Enfold > Performance > File Compression settings? Please try toggle or temporarily disable it, and make sure to purge the cache.

If you have any additional questions at this time we kindly ask that you open them up in separate threads. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,

Thank you for the update.

It seems to work correctly when the tooltip link (GIF TEST) is in the same line. Please check the screenshot below.

Screenshot: https://postimg.cc/SXsCRMDz

We inserted a few letters before the link to completely push it in the second line.

Best regards,
Ismael

Hi,

Alright. Please try to edit the enfold/config-templatebuilder/avia-shortcodes/portfolio/portfolio.php file, look for this code around line 1351..

$params['size'] = $params['preview_size'];

.., and replace it with:

$params['size'] = "full";

Let us know how it goes.

Best regards,
Ismael

Hi,

Try to edit the snippet from the previous thread, look for this code.

$output .= $footertop;

Replace it with:

$output .= do_shortcode($footertop);

You may also have to include this filter in the functions.php file.

function avf_custom_exec_sc_only_mod( $exec_sc_only, $obj_sc, $atts, $content, $shortcodename, $fake ) {
	return true;
}

add_filter( 'avf_alb_exec_sc_only', 'avf_custom_exec_sc_only_mod', 10, 6 );

Let us know if it helps.

Best regards,
Ismael

Hi,

Thank you for the update.

We cannot reproduce the same issue on our end, so it is probably cause by a plugin or a custom script. Did you copy the code directly from this forum?

For the image overlay or “rollover”, please try this code in the Quick CSS field.

.avia-image-container.av-hover-grow, .avia-image-container.av-hover-grow .avia-image-container-inner, .avia-image-container.av-hover-grow .avia-image-overlay-wrap a.avia_image {
    overflow: hidden;
}

Make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

Best regards,
Ismael

Hey Jan,

Thank you for the info.

We will forward the issue to our channel and possibly include the changes in the next patch.

Best regards,
Ismael

Hey Fiore,

Thank you for the inquiry.

Is it working correctly when using a different theme or when the plugins are deactivated? Please post the site URL in the private field so that we can check it. You should also try to increase the maximum file upload size limit. Here’s how.

// https://www.wpkube.com/how-to-increase-the-maximum-file-upload-size-in-wordpress-5-methods/

Best regards,
Ismael