Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 15, 2025 at 4:49 pm #1492533
    mistermagoo8691

    In the middle of the top menu bar on the mobile view, I’d like to place a “<=” button (or a menu item with an icon).
    This button/menu item should have a simple “javascript:history.back()” link so that the user can go back to the previous page.

    This is useful when the website is installed as a webapp and there is no browser around it.

    Could you please help me? I’ve seen some requests in the forum for a secondary menu in addition to the hamburger menu, but the PHP + CSS code mentioned seems quite complex for what I want to do.

    Here what I’d like to achieve…

    Back button

    Thanks in advance!
    Bye,
    A.-

    December 16, 2025 at 9:05 am #1492555
    Ismael

    Hey Angelo,

    Thank you for the inquiry.

    Try to add this code to the functions.php file to insert a go back button inside the header container.

    
add_action( 'ava_main_header', 'ava_main_header_mod' );
function ava_main_header_mod() {
    ?>
    <div class="ava-go-back-wrapper">
        <a href="javascript:history.back();" class="ava-go-back-button">Go Back</a>
    </div>

    <style>
        .ava-go-back-wrapper {
            display: none;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
        }
        .ava-go-back-button {
            display: inline-block;
            padding: 8px 16px;
            background-color: #333;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
        }
        @media (max-width: 768px) {
            .ava-go-back-wrapper {
                display: flex;
            }
        }
    </style>

    <script>
        function closeBurgerMenu() {
            const burgerBtn = document.querySelector('.av-burger-menu-main .av-hamburger.av-js-hamburger');
            const overlay = document.querySelector('.av-burger-overlay');
            if (burgerBtn && burgerBtn.classList.contains('is-active')) {
                burgerBtn.classList.remove('is-active');
            }
            if (overlay) {
                overlay.style.display = 'none';
                overlay.style.opacity = '0';
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            closeBurgerMenu();

            const goBackBtn = document.querySelector('.ava-go-back-button');
            if (goBackBtn) {
                goBackBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    closeBurgerMenu();
                    setTimeout(function() {
                        history.back();
                    }, 50);
                });
            }
        });

        window.addEventListener('pageshow', function(event) {
            if (event.persisted) {
                closeBurgerMenu();
            }
        });
    </script>
    <?php
}

    Best regards,
    Ismael

    December 16, 2025 at 12:47 pm #1492561
    mistermagoo8691

    Thanks Ismael! almost OK :)

    See here: before reaching 768px the header is fine…

    before

    After 768px, it creates an additional header, with the button in the middle :-)

    after

    In private the staging area info.
    Thanks again!
    Bye,
    A.-

    December 17, 2025 at 8:04 am #1492588
    Ismael

    Hey!

    Thank you for the update.

    Please add this to the style block or style element:

    .ava-go-back-wrapper {
    position: absolute;
    z-index: 99;
    left: 55%;
    right: auto;
    top: 5px;
}

    fc5aVDb.md.png

    Best regards,
    Ismael

    December 17, 2025 at 12:07 pm #1492611
    mistermagoo8691

    Thanks Ismael for your precious help, it is ok now!
    For any future use of anyone else, I’ve slightly adapted it. Now it sticks to the right of the logo, and there is a “left arrow” icon instead of the text.

    arrow button
    Here the code to be added to the functions.php of the child theme. The button is visible <780px screens only.

    
add_action( 'ava_main_header', 'ava_main_header_mod' );

function ava_main_header_mod() {
    ?>
    <div class="ava-go-back-wrapper">
        #
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </a>
    </div>

    <style>
        .ava-go-back-wrapper {
            display: none; 
            margin-left: 10px; 
            z-index: 1001;
            align-items: center; 
        }

        .ava-go-back-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            padding: 0;
            background-color: transparent; 
            border: none;
            color: #333333;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
            transition: opacity 0.2s ease;
        }

        .ava-go-back-button:active {
            opacity: 0.5;
        }
        
        .ava-go-back-button svg {
            display: block;
        }

        @media only screen and (max-width: 780px) {
            .responsive #top .logo,
            .responsive .logo,
            .logo {
                display: flex !important; 
                align-items: center !important;
                width: auto !important; 
                float: left !important;
                overflow: visible !important;
            }

            .logo a {
                display: flex !important;
                align-items: center;
            }
            
            .ava-go-back-wrapper {
                display: flex !important;
            }
        }
        
        @media only screen and (max-width: 360px) {
            .ava-go-back-wrapper {
                 margin-left: 5px;
            }
            .ava-go-back-button {
                width: 40px;
                height: 40px;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var logo = document.querySelector('.logo');
            var backBtnWrapper = document.querySelector('.ava-go-back-wrapper');

            if (logo && backBtnWrapper) {
                logo.appendChild(backBtnWrapper);
            }

            function closeBurgerMenu() {
                const burgerBtn = document.querySelector('.av-burger-menu-main .av-hamburger.av-js-hamburger');
                const overlay = document.querySelector('.av-burger-overlay');
                if (burgerBtn && burgerBtn.classList.contains('is-active')) {
                    burgerBtn.classList.remove('is-active');
                }
                if (overlay) {
                    overlay.style.display = 'none';
                    overlay.style.opacity = '0';
                }
            }

            const goBackBtn = document.querySelector('.ava-go-back-button');
            if (goBackBtn) {
                goBackBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    closeBurgerMenu();
                    
                    setTimeout(function() {
                        history.back();
                    }, 50);
                });
            }
        });
    </script>
    <?php
}

    Bye!
    A.-

    December 18, 2025 at 8:52 am #1492645
    Ismael

    Hi,

    Good to know this is now working! Thanks for sharing the final solution. Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.