Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1437755

    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

    • This topic was modified 8 months, 1 week ago by greg47.
    • This topic was modified 8 months, 1 week ago by greg47.
    #1438069

    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:
    Enfold_Support_5144.jpeg
    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 this var 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,
    Mike

    #1438209

    Hi,

    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

    • This reply was modified 8 months ago by greg47.
    • This reply was modified 8 months ago by greg47.
    • This reply was modified 8 months ago by greg47.
    #1438308

    Hi,
    When the menu is open this class is added: is-active
    Enfold_Support_5166.jpeg
    I don’t really understand why you are doing this, but I think it has to do with your custom button with the script onclick="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,
    Mike

    #1438357

    Hi,

    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 visitor

    You’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.

    • This reply was modified 8 months ago by greg47.
    • This reply was modified 8 months ago by greg47.
    #1438360

    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.

    #1438366

    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,
    Mike

    #1438453

    Hello 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,

    • This reply was modified 8 months ago by greg47.
    #1438465

    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,
    Mike

    #1438467

    Hi Mike,

    Thank you for your response.

    No, it’s good with the button element; I found this solution to be better.

    But how do I call it on a page after pasting your code in function.php?

    Thank you,

    • This reply was modified 8 months ago by greg47.
    #1438474

    Hi,
    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,
    Mike

    #1438505

    Hi,
    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:
    Enfold_Support_5190.jpeg
    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

    #1438529

    Hi Mike,

    You’re last solution worked.

    Thank you very much for you’re help Mike :)

    Have a good one

    #1438539

    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

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Menu on mobile remains open when I return to the previous page’ is closed to new replies.