Menu bug when store change url from .de to .de/fr

david-kaplan
Shopify Partner
13 0 0

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="#">

DKaplos32_0-1698518339792.png

On de/fr version. notice the <a href="/fr#". 

DKaplos32_1-1698518412622.png

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 

 

Replies 0 (0)