Celestia Template, Burger Menu Doesn't Collapse
Alex Barendregt
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
Atick Eashrak Shuvo
Accepted AnswerTry 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);
}
}
});
});Atick Eashrak Shuvo
Accepted AnswerHello 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
Accepted Answerok 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.