-
Posts
-
Hi,
I’m using the Enfold mobile menu in full screen mode.
Here’s my use case:
– I’m on my WordPress website on mobile.
– I open the menu with the burger button.
– I click on another page from the menu and navigate to it.
– I go back using the previous button.
-> Issue: The menu remains open.I asked ChatGPT to generate some code for me. I inserted it into the page, and it works well. It automatically clicks on the burger button when I go back, closing the menu if it was open. Perfect!
However, if I change the page without opening the menu with the burger button, when I go back, it automatically clicks on the burger button and opens the menu. The opposite thing happens.
Here’s the code generated by ChatGPT that works only in the first case.
<!DOCTYPE html>
<html lang=”fr”>
<head>
<meta charset=”UTF-8″>
<title>Page avec gestion du menu</title>
<script>
window.addEventListener(‘pageshow’, function(event) {
// Vérifier si l’événement de pageshow est une traversée de l’historique
if (event.persisted) {
// Masquer le menu
var menuButton = document.querySelector(‘.av-hamburger.av-hamburger–spin.av-js-hamburger.av-inserted-main-menu’);
if (menuButton) {
menuButton.click(); // Simuler un clic sur le bouton de menu pour le masquer
}
}
});
</script>
</head>
<body>
<!– Contenu de votre page ici –><!– Bouton du menu (à remplacer par le sélecteur réel de votre bouton de menu) –>
<button class=”av-hamburger av-hamburger–spin av-js-hamburger av-inserted-main-menu”>Menu</button></body>
</html>Can you help me ? Thank you
Hey greg47,
Thanks for the video, the first thing that I notice is that you entered a second html & head tag ino your page with the script that ChatGPT gave you:
typically when ChatGPT gives you this it is to point out that the script goes into the head of your page, I recommend not adding this.
So it looks like you are creating a event that will click the burger menu, the check to see if the menu is open is missing the class is-active so the script will run in all cases, even if it is alread closed.
Try changing this line:var menuButton = document.querySelector('.av-hamburger.av-hamburger–spin.av-js-hamburger.av-inserted-main-menu');
to thisvar menuButton = document.querySelector('.av-hamburger.av-hamburger–spin.av-js-hamburger.av-inserted-main-menu.is-active');
Then it should only click the menu if it is open.
Best regards,
MikeHi,
Thank you for you answer,
I don’t know why but my class have changed. It works now with “.av-hamburger-inner”
It works like before if I use that : “.av-hamburger-inner”, but not with your edited code : “.av-hamburger-inner.isactive”
Nothing happens when I add the .isactive, and the previous code dont works too.
Do you know where it could come from ?
<!DOCTYPE html> <html lang="fr"> <meta charset="UTF-8"> <title>Page avec gestion du menu</title> <script> window.addEventListener('pageshow', function(event) { // Vérifier si l’événement de pageshow est une traversée de l’historique if (event.persisted) { // Masquer le menu var menuButton = document.querySelector('.av-hamburger-inner.isactive'); if (menuButton) { menuButton.click(); // Simuler un clic sur le bouton de menu pour le masquer } } }); </script> <body> <!-- Contenu de votre page ici --> <!-- Bouton du menu (à remplacer par le sélecteur réel de votre bouton de menu) --> <button class="av-hamburger-inner">Menu</button> </body> </html>But when I click on the page when I inspect the page, I have this class :
av-hamburger av-hamburger--spin av-js-hamburger av-inserted-main-menu is-active
When i past this in the code I have only a menu button which appears, so I dont know what is the issue.Thank you
Hi,
When the menu is open this class is added:is-active
I don’t really understand why you are doing this, but I think it has to do with your custom button with the scriptonclick="window.history.back()it seems like if you didn’t use that you would not have this issue, correct?
Try using a button with a proper link.Best regards,
MikeHi,
Thank you for your response.
Just to provide some information:
– onclick=”window.history.back()” is a button added with a plugin.
– I dont have the issue when I’m connect to the website with my admin account. It’s only when I’m a visitorYou’re correct, if I deactivate the plugin, the menu no longer appears when I simply click on “previous”.
So, the issue arises from there.
I attempted to create a custom button previously, but encountered a bug where the button was hidden but clickable all over the page. I think it’s because I used it on all my website pages and articles. That’s why I used this plugin.
Do you think there’s a way I can keep the plugin and prevent the menu from being displayed when I click on onclick=”window.history.back()”?
If not, what HTML can I use to display a proper previous button on my page? I will use it several times on the same page, and on other pages as well.
Thank you.
Let me explain why I made it like that.
I’ve created 15 QR codes that link to specific filters on my “/evenements” page.
When a visitor navigates to another page, I want them to retain the filter applied from the QR code when they click on the previous button. Therefore, I implemented a navigation system with this previous button.
If I simply add the ‘evenement’ page to the menu, the filter will be lost. That’s why I’ve implemented it this way.
I believe I could save the filter settings as cookies and apply them to the event menu page, but I’m not sure how to do it; it seems complicated. So, I opted for the previous button system.
Hi,
I tried to recreate the issue by adding a button to a page with the custom classes back menu-item
note there are no dots and there is a space
Then I used this jQuery:(function($){ $(".back.menu-item a").attr("onclick", "window.history.back()"); })(jQuery);I added it with the WPCode plugin and a javascript snippet type, but you could use your functions.php if you wrap it like this
function custom_script() { ?> <script>(function($){ $(".back.menu-item a").attr("onclick", "window.history.back()"); })(jQuery); </script> <?php } add_action( 'wp_footer', 'custom_script', 99 );then I logged out and enulated a mobile device and with the mobile menu I landed on the page with the button and when I clicked it I was sent back and the mobile menu was not open.
Give this a try. Perhaps you can use this instead of the plugin.Best regards,
MikeHello Mike,
I pasted your PHP code in function.php and deactivate the plugin.
Now I tried to call your class using a button in HTML code, but I think I’ve done something wrong. In my page, I wrote this:
<button type="button" onclick="custom_script()">Click me</button>The button appears, but nothing happens when I click on it.
Do you know what might be causing this?
Thank you,
Hi,
If you don’t want to use a button element and want to add your own button tag then try this:
<button type="button" onclick="window.history.back()">Click me</button>
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
I also tesed this on my demo site and enulated a mobile device and with the mobile menu I landed on the page with the button and when I clicked it I was sent back and the mobile menu was not open.Best regards,
MikeHi,
I believe that you misunderstand, if you want to use your button tag then you don’t need the jQuery I posted above, just add this to your page in a code block element:
<button type="button" onclick="window.history.back()">Click me</button>
If you want to use the button element, as above, just follow those steps:
Add a button to a page with the custom classes back menu-item
then add this to your functions.php:function custom_script() { ?> <script>(function($){ $(".back.menu-item a").attr("onclick", "window.history.back()"); })(jQuery); </script> <?php } add_action( 'wp_footer', 'custom_script', 99 );Don’t do both, and don’t use the plugin.
If you still have trouble please include an admin login in the Private Content area so we can add this for you.Best regards,
MikeHi,
I was just working on another thread where a similar issue was that the sub-menu and the burger menu were still 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, and while my above solution worked for the custom button issue you are having I thought that perhaps this would be a better solution for you as it will also solve the use of the browser back button, so give this a try instead of the above solutions and see if it works for you. 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,
MikeHi,
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
- The topic ‘Menu on mobile remains open when I return to the previous page’ is closed to new replies.