Menu problem on iPAD with Safari browser when using back button

Hey Bruno,
Thanks for the screenshots, I tested this on my demo site with Safari on Mac and Firefox on Windows and the sub-menu and the burger menu were open when the browser back button was used, this is due to the browser serving a browser cached version of the page. The following javascript solved this in my tests, I recommend using the WP Code plugin then add a new snippet, in the top right corner use the javascript snippet as the code type:

and add this code:

window.addEventListener('pageshow', (event) => {
    if (window.matchMedia('(min-width: 990px)').matches) {
        document.querySelectorAll('.sub-menu').forEach((subMenu) => {
            subMenu.style.opacity = '0';
            subMenu.style.visibility = 'hidden';
        });
    } else {
        const overlay = document.querySelector('.av-burger-overlay');
        if (overlay) {
            overlay.style.display = 'none';
            overlay.style.opacity = '0';
        }
        const hamburger = document.querySelector('.av-hamburger');
        if (hamburger) {
            hamburger.classList.remove('is-active');
        }
        document.documentElement.classList.remove('av-burger-overlay-active', 'av-burger-overlay-active-delayed');
    }
});

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Please try this snippet instead:

window.addEventListener('pageshow', (event) => {
    if (window.matchMedia('(min-width: 990px)').matches) {
        document.querySelectorAll('#avia-menu .sub-menu').forEach((subMenu) => {
            subMenu.style.opacity = '0';
            subMenu.style.visibility = 'hidden';
            subMenu.style.display = 'none';
        });
    } else {
        const overlay = document.querySelector('.av-burger-overlay');
        if (overlay) {
            overlay.style.display = 'none';
            overlay.style.opacity = '0';
        }

        const hamburger = document.querySelector('.av-hamburger');
        if (hamburger) {
            hamburger.classList.remove('is-active');
        }
        document.querySelectorAll('.av-active-burger-items .sub-menu').forEach((subMenu) => {
            subMenu.style.display = 'none';
        });
		document.querySelectorAll('.av-active-burger-items .av-width-submenu').forEach((withsubMenu) => {
            withsubMenu.classList.remove('av-show-submenu');
        });

        document.documentElement.classList.remove('av-burger-overlay-active', 'av-burger-overlay-active-delayed');
    }
});

and don’t use Smart Conditional Logic.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
Please include a admin login in the Private Content area so we can examine.

Best regards,
Mike

Hi,
Thank for the login, I disable the previous solution and added this javascript solution:

window.addEventListener('pageshow', (event) => {
    if (event.persisted) {
			if (window.matchMedia('(min-width: 990px)').matches) {
        const menu = document.getElementById('avia-menu');
        const visibleSubMenus = menu.querySelectorAll('ul.sub-menu[style*="opacity: 1"]');
        if (visibleSubMenus.length > 0) {
            window.location.reload();
        }
		const visibleMagaMenus = menu.querySelectorAll('div.avia_mega_div[style*="opacity: 1"]');
        if (visibleMagaMenus.length > 0) {
            window.location.reload();
        }		
			} else {
				const visibleoverlay = document.querySelectorAll('.av-burger-overlay-active');
				if (visibleoverlay.length > 0) {
                window.location.reload();
        }
			}
    }
});

This checks if the main menu sub-menu, or mega menu, or burger menu overlay is visible, if any of them are then it means the browser back button was used and the browser id displaying a cached page, so the javascript reloads the page to correct.
If a main menu link is clicked then using the back button doesn’t cause the page to reload, and the same for some Windows browsers like Chrome & Edge.
This will also not cause any issues with normally navigating the site with menu items, I’m not sure how popular using the browser back button is, since most online stores, banks, and sites where data is input often advise to not use the browser back button, but this will solve the issue if someone does.
This works for Android, but I don’t have a iPad or iPhone, but I’m pretty sure it will work.
Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike