Menu bug when store change url from .de to .de/fr
Hi fellow developers, thank you for your help.
1. I published French language. Get automatic URL rukatech.de/fr
2. When I am on the .de version everything works fine. On .de/fr the main menu doesn't work. It works on mobile but not on desktop. How it "works" is in the video.
Online store is here. https://rukatech-filter.de/
One think I noticed on .de version. Notice the <a href="#">
On de/fr version. notice the <a href="/fr#".
That is probably at least a part of the problem.
In Shopify Navigation is the top link "Fabricant" set to # so I can use it only to open up the rest of the navigation.
This is a code for the theme. header. This is for the whole picture. Below the snippet there is a part I suspect is the problematic one.
theme.headerNav = function() {
var e, t, i, n, o = "#HeaderWrapper",
s = "#SiteHeader",
a = "#LogoContainer img",
r = ".megamenu",
c = ".site-navigation",
l = ".site-nav__item",
d = ".site-nav__link--has-dropdown",
h = ".site-nav__dropdown-link--second-level",
u = ".site-nav__compress-menu",
p = '[data-type="nav"]',
m = '[data-type="search"]',
f = {
hasDropdownClass: "site-nav--has-dropdown",
hasSubDropdownClass: "site-nav__deep-dropdown-trigger",
dropdownActive: "is-focused",
headerCompressed: "header-wrapper--compressed",
overlay: "header-wrapper--overlay",
overlayStyle: "is-light"
},
v = {
namespace: ".siteNav",
wrapperOverlayed: !1,
stickyEnabled: !1,
stickyActive: !1,
subarPositionInit: !1,
threshold: 0
};
function g() {
theme.settings.overlayHeader && document.querySelector(".header-section").classList.add("header-section--overlay");
var t = theme.config.bpSmall ? document.querySelector('.site-header__element--sub[data-type="search"]') : document.querySelector('.site-header__element--sub[data-type="nav"]');
if (t) {
var i = t.offsetHeight;
0 !== i && document.documentElement.style.setProperty("--header-padding-bottom", i + "px"), v.subarPositionInit || (e.classList.add("header-wrapper--init"), v.subarPositionInit = !0)
}
}
function y() {
document.querySelector(".header-section").style.position = "relative"
}
function S() {
v.stickyEnabled && !v.forceStopSticky && requestAnimationFrame(b)
}
function b() {
if (window.scrollY > v.threshold) !v.stickyActive && (i && theme.utils.prepareTransition(i), n && theme.utils.prepareTransition(n), v.stickyActive = !0, e.classList.add(f.headerCompressed), v.wrapperOverlayed && e.classList.remove(f.overlayStyle), document.dispatchEvent(new CustomEvent("headerStickyChange")));
else {
if (!v.stickyActive) return;
i && theme.utils.prepareTransition(i), n && theme.utils.prepareTransition(n), v.stickyActive = !1, v.threshold = e.getBoundingClientRect().top, e.classList.remove(f.headerCompressed), v.wrapperOverlayed && e.classList.add(f.overlayStyle), document.dispatchEvent(new CustomEvent("headerStickyChange"))
}
}
function w(e) {
document.querySelectorAll(a).forEach((e => {
var t = e.clientWidth,
i = e.closest(".header-item").clientWidth;
t > i ? e.style.maxWidth = i : e.removeAttribute("style")
}))
}
return {
init: function() {
e = document.querySelector(o), t = document.querySelector(s), i = e.querySelector(p), n = e.querySelector(m), v.threshold = e.getBoundingClientRect().top, v.subarPositionInit = !1, v.stickyEnabled = "true" === t.dataset.sticky, v.stickyEnabled ? (v.wrapperOverlayed = e.classList.contains(f.overlayStyle), theme.config.stickyHeader = (a = 0, t.querySelectorAll(r).forEach((e => {
var t = e.offsetHeight;
t > a && (a = t)
})), !(window.innerHeight < a + 120)), theme.config.stickyHeader ? (v.forceStopSticky = !1, window.scrollY > v.threshold && S(), window.on("scroll" + v.namespace, S)) : (v.forceStopSticky = !0, y())) : y(), theme.settings.overlayHeader = "true" === t.dataset.overlay, theme.settings.overlayHeader && Shopify && Shopify.designMode && document.body.classList.contains("template-collection") && !document.querySelector(".collection-hero") && this.disableOverlayHeader(), g(), window.on("resize" + v.namespace, theme.utils.debounce(250, g));
var a, b = e.querySelector(u);
b && b.on("click", (function() {
b.classList.toggle("is-active"), theme.utils.prepareTransition(i, (function() {
i.classList.toggle("is-active")
}))
})),
function() {
var e = !1;
function i(t) {
var i = t.parentNode;
if (i.classList.contains(f.hasDropdownClass) && (i.classList.add(f.dropdownActive), !0), !theme.config.isTouch && !e) {
var n = theme.config.isTouch ? "touchend" : "click";
e = !0, document.documentElement.on(n + v.namespace, function() {
o(), document.documentElement.off(n + v.namespace), e = !1
}.bind(this))
}
}
function n(e, t) {
var i = e.parentNode;
(i.classList.contains(f.hasSubDropdownClass) || t) && (i.classList.add(f.dropdownActive), !0)
}
function o() {
s(), a()
}
function s() {
document.querySelectorAll(l).forEach((e => {
e.classList.remove(f.dropdownActive)
}))
}
function a() {
document.querySelectorAll(h).forEach((e => {
e.parentNode.classList.remove(f.dropdownActive)
}))
}
theme.config.isTouch && document.querySelectorAll(d).forEach((e => {
e.on("touchend" + v.namespace, (function(e) {
e.currentTarget.parentNode.classList.contains(f.dropdownActive) ? window.location.replace(e.currentTarget.getAttribute("href")) : (e.preventDefault(), o(), i(e.currentTarget))
}))
})), document.querySelectorAll(h).forEach((e => {
theme.config.isTouch && e.on("touchend" + v.namespace, (function(e) {
var t = e.currentTarget.parentNode;
t.classList.contains(f.hasSubDropdownClass) ? t.classList.contains(f.dropdownActive) ? window.location.replace(e.currentTarget.getAttribute("href")) : (e.preventDefault(), a(), n(e.currentTarget)) : window.location.replace(e.currentTarget.getAttribute("href"))
})), e.on("focusin" + v.namespace, (function(e) {
a(), n(e.currentTarget, !0)
}))
})), theme.config.isTouch && (document.body.on("touchend" + v.namespace, (function() {
o()
})), t.querySelectorAll(r).forEach((e => {
e.on("touchend" + v.namespace, (function(e) {
e.stopImmediatePropagation()
}))
})))
}();
var L = t.querySelector(c);
L.querySelectorAll(".grid-product") && (new theme.QuickAdd(L), new theme.QuickShop(L)), window.on("load" + v.namespace, w), window.on("resize" + v.namespace, theme.utils.debounce(150, w))
},
removeOverlayClass: function() {
v.wrapperOverlayed && e.classList.remove(f.overlayStyle)
},
disableOverlayHeader: function() {
e.classList.remove(v.overlayEnabledClass, f.overlayStyle), v.wrapperOverlayed = !1, theme.settings.overlayHeader = !1
}
}This is what I suspect is problematic.
theme.config.isTouch && document.querySelectorAll(d).forEach((e => {
e.on("touchend" + v.namespace, (function(e) {
e.currentTarget.parentNode.classList.contains(f.dropdownActive) ? window.location.replace(e.currentTarget.getAttribute("href")) : (e.preventDefault(), o(), i(e.currentTarget))
}))
})), document.querySelectorAll(h).forEach((e => {
theme.config.isTouch && e.on("touchend" + v.namespace, (function(e) {
var t = e.currentTarget.parentNode;
t.classList.contains(f.hasSubDropdownClass) ? t.classList.contains(f.dropdownActive) ? window.location.replace(e.currentTarget.getAttribute("href")) : (e.preventDefault(), a(), n(e.currentTarget)) : window.location.replace(e.currentTarget.getAttribute("href"))
})), e.on("focusin" + v.namespace, (function(e) {
a(), n(e.currentTarget, !0)
}))
})), theme.config.isTouch && (document.body.on("touchend" + v.namespace, (function() {
o()
})), t.querySelectorAll(r).forEach((e => {
e.on("touchend" + v.namespace, (function(e) {
e.stopImmediatePropagation()
}))
})))Thank you again for your help. Any questions please let me know.
Thank you
David
Community Blog Articles
Holiday Cheers to Our Community | November '24
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024
Dropshipping Viral Products to Sell in 2025
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024
Shining a spotlight on our top members of October 2024!
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024