Solved Templates

Celestia template, Burger Menu doesn't collapse

Asked by Alex Barendregt 11 months ago Last activity 11 months ago

Hi Team,
We’re having an issue with our header in Celestia template. / J 5.3, latest Pagebuilder and latest Template.
The menu is triggered by a burger button, both on mobile and on the desktop version.
However, when you click on a menu item, it correctly opens the target page, but the menu doesn’t collapse afterward. This is only with the one page content. the 2 menus for inprint work fine. Here’s the link to our site: https://test.maiimmo.at

Accepted answer

Marked as the solution

Atick Eashrak Shuvo Staff

11 months ago

Try this js

jQuery(function ($) {
    'use strict';

    function getAnchorFromUrl(url) {
        if (url.indexOf('#') > -1) {
            var parts = url.split('#');
            var currentPath = window.location.origin + window.location.pathname;
            var linkPath = parts[0];

            if (linkPath === '' || linkPath === currentPath || url.indexOf(currentPath) === 0) {
                return '#' + parts[1];
            }
        }
        return null;
    }

    $(document).on('click', '.offcanvas-init a', function(e) {
        var href = $(this).attr('href');
        var anchor = null;

        if (href && href.indexOf('#') > -1) {
            if (href.startsWith('#')) {
                anchor = href;
            } else {
                anchor = getAnchorFromUrl(href);
            }

            if (anchor && anchor !== '#' && $(anchor).length > 0) {
                e.preventDefault();
                var headerHeight = $('#sp-header').outerHeight() || 80;
                var targetOffset = $(anchor).offset().top - headerHeight;

                $('.offcanvas-init').removeClass('offcanvas-active full-offcanvas');

                $('html, body').animate({
                    scrollTop: targetOffset
                }, 400);
            }
        }
    });

    $(document).on('click', '#modal-menu a', function(e) {
        var href = $(this).attr('href');
        var anchor = null;

        if (href && href.indexOf('#') > -1) {
            if (href.startsWith('#')) {
                anchor = href;
            } else {
                anchor = getAnchorFromUrl(href);
            }

            if (anchor && anchor !== '#' && $(anchor).length > 0) {
                e.preventDefault();
                var $modalMenu = $('#modal-menu');
                var $modalToggler = $('#modal-menu-toggler');
                var $body = $('body');

                var headerHeight = $('#sp-header').outerHeight() || 80;
                var targetOffset = $(anchor).offset().top - headerHeight;

                $modalMenu.removeClass('active');
                $modalToggler.removeClass('active');
                $body.removeClass('modal-menu-active');

                $('html, body').animate({
                    scrollTop: targetOffset
                }, 400);
            }
        }
    });
});

4 more replies

Atick Eashrak Shuvo Staff

11 months ago

Hello Alex Barendregt,

Sorry for the inconvenience you're experiencing.

Please add the following code snippet to your Template Options under Custom Code, in the Custom Javascript section:

jQuery(function ($) {
    'use strict';

    $(document).on('click', '.offcanvas-init a[href^="#"]:not([href="#"])', function(e) {
        e.preventDefault();
        var target = $(this).attr('href');

        if ($(target).length > 0) {
            var headerHeight = $('#sp-header').outerHeight() || 80;
            var targetOffset = $(target).offset().top - headerHeight;

            $('.offcanvas-init').removeClass('offcanvas-active full-offcanvas');

            $('html, body').animate({
                scrollTop: targetOffset
            }, 400);
        }
    });

    $(document).on('click', '#modal-menu a[href^="#"]:not([href="#"])', function(e) {
        e.preventDefault();
        var target = $(this).attr('href');

        if ($(target).length > 0) {
            var $modalMenu = $('#modal-menu');
            var $modalToggler = $('#modal-menu-toggler');
            var $body = $('body');

            var headerHeight = $('#sp-header').outerHeight() || 80;
            var targetOffset = $(target).offset().top - headerHeight;

            $modalMenu.removeClass('active');
            $modalToggler.removeClass('active');
            $body.removeClass('modal-menu-active');

            $('html, body').animate({
                scrollTop: targetOffset
            }, 400);
        }
    });
});

Hope this helps! If the issue still persists, please let me know and I will investigate further.

Best regards

Alex Barendregt Asked this

11 months ago

ok that would work if i have on the start page only anchors #
the minute i put the full url in https://test.maiimmo.at/#angebote it doesn't work.
I have to because the imprint is a separate page as well as the Privacy Policy.

Alex Barendregt Asked this

11 months ago

great that works now. thank you

Atick Eashrak Shuvo Staff

11 months ago

You’re very welcome! I’m glad to hear it’s working now. Please feel free to reach out if you need any further assistance.