Takis

Site needs to be bilingual. English pages are under */en/* and Greek pages under */el/* For that purpose, I injected the code below to the global header so to hide from the header when English pages are active the links to the Greek pages and vice versa. Works perfect, as evidenced by /en/policy and /el/policy pages which are the only set up as bilingual at the moment. <script> window.addEventListener('DOMContentLoaded', function() { var currentURL = window.location.href; if (currentURL.includes("/en/") || currentURL.includes("/el/")) { var englishPages = document.querySelectorAll('a[href*="/en/"]'); var greekPages = document.querySelectorAll('a[href*="/el/"]'); var header = document.querySelector('.Header.Header--bottom'); // Hide the links immediately for (var i = 0; i < englishPages.length; i++) { englishPages[i].style.display = "none"; } for (var i = 0; i < greekPages.length; i++) { greekPages[i].style.display = "none"; } if (currentURL.includes("/en/")) { // Display English links only for (var i = 0; i < englishPages.length; i++) { englishPages[i].style.display = ""; } // Hide Greek links completely for (var i = 0; i < greekPages.length; i++) { greekPages[i].style.display = "none"; } } else { // Display Greek links only for (var i = 0; i < greekPages.length; i++) { greekPages[i].style.display = ""; } // Hide English links completely for (var i = 0; i < englishPages.length; i++) { englishPages[i].style.display = "none"; } } } }); </script> The problem however is this. Although the links of the non relevant language pages are hidden perfectly and promptly , apparently they take up a bit of a space. The wrapped links, last two, i,.e. "Privacy Policy" and "Contact us", are normally and should be to the far right of the 2nd row as seen in the picture. Now as you can see in the webpage, they are slightly more to the left because I added in the Main Navigation Pages the /el/policy page. If I add another /el/page they will go even more to the left. Add enough, they will end up to the far left. What gives? And any ideas. Tried few things but nothing works. Example of failed attempt to eliminated that space taken from hidden links // Set width and height of hidden links to zero for (var i = 0; i < englishPages.length; i++) { englishPages[i].style.width = "0"; englishPages[i].style.height = "0"; } for (var i = 0; i < greekPages.length; i++) { greekPages[i].style.width = "0"; greekPages[i].style.height = "0"; } // Set CSS rule to make sure wrapped text is to the far right of the page var style = document.createElement('style'); style.innerHTML = ` .Header-nav--primary { justify-content: flex-end; } `; document.head.appendChild(style); </script> Help is VERY much appreciated. SOLVED: 8 Hours I was trying to solve it and as soon as I posted the solution came up. Posting final code with all corrections here for posterity. 2nd row is now aligned right, all links are promptly hidden depending the language and also added a switch to completely disregard any pages than their URL does not contain an /en/ (english) or /el/ (Greek) address window.addEventListener('DOMContentLoaded', function() { var currentURL = window.location.href; var englishPages = document.querySelectorAll('a[href*="/en/"]'); var greekPages = document.querySelectorAll('a[href*="/el/"]'); var header = document.querySelector('.Header.Header--bottom'); // Hide the links and their parent elements completely for (var i = 0; i < englishPages.length; i++) { englishPages[i].parentNode.style.display = "none"; } for (var i = 0; i < greekPages.length; i++) { greekPages[i].parentNode.style.display = "none"; } if (currentURL.includes("/en/")) { // Display English links only for (var i = 0; i < englishPages.length; i++) { englishPages[i].parentNode.style.display = "block"; } // Hide Greek links and their parent elements completely for (var i = 0; i < greekPages.length; i++) { greekPages[i].parentNode.style.display = "none"; } } else if (currentURL.includes("/el/")) { // Display Greek links only for (var i = 0; i < greekPages.length; i++) { greekPages[i].parentNode.style.display = "block"; } // Hide English links and their parent elements completely for (var i = 0; i < englishPages.length; i++) { englishPages[i].parentNode.style.display = "none"; } } else { // Display all links for (var i = 0; i < englishPages.length; i++) { englishPages[i].parentNode.style.display = "block"; } for (var i = 0; i < greekPages.length; i++) { greekPages[i].parentNode.style.display = "block"; } } // Align second row of links to the right var navItems = header.querySelectorAll('.Header-nav > .Header-nav-item'); var secondRowItems = []; for (var i = 0; i < navItems.length; i++) { if (navItems[i].offsetTop > navItems[0].offsetTop) { secondRowItems.push(navItems[i]); } } var offsetRight = 0; for (var i = 0; i < secondRowItems.length; i++) { offsetRight += secondRowItems[i].offsetWidth; } header.querySelector('.Header-nav:last-child').style.marginRight = offsetRight + 'px'; });

Yes, with the solution provided just above. Funny enough, I deleted by mistake the footer and started fricking out. searching the internet for a solution, I fell into my own

@tuanphan Your solution works like a charm for embedding Cookie Script’s cookie report java script inside an accordion (List of Cookies, at the bottom of the page). I do however have a problem with the mobile view, and potentially the tablet one. It will not scale to fit the screen, half the text is missing. Scale needs to occur on this particular accordion and “child”. The other accordions, without script, scale properly. I suspect something in the CSS but can’t figure it. Desktop view from computer and mobile looks fine. Additional question on styles How can I change the fonts of the cookie report, let say to ariel 10, weight 100. Despite setting the Design in accordion as Paragraph 2, same as the other accordions, it uses another font, probably the script’s default. Squarespace 7.1 business plan, https://www.tsiricos.gr/en/privacy EDIT 72hs straight later, I managed to divinite a solution that works 100% by specifying font properties on script block and manually resizing the fonts for mobile view only. However, If there is a more elegant solution whereby text scales automatically depending the resolution as is the case with squarespace text blocks, I would be very interested to know it as this would solve any unforeseen future problems with different resolutions. Solution : Insert code in CSS, altering block #, font and values accordingly /* COOKIE SCRIPT REPORT ACCORDION */ /* General Font cookie report script */ div#block-yui_3_17_2_1_1675447221528_20915 { font-family: "neue-haas-grotesk-display"; font-weight:100; font-size:.9em; text-transform:none; letter-spacing:.0em; margin-top:4px; margin-bottom:10px; } /* mobile view cookie report size font */ @media only screen and (max-width: 640px) { div#block-yui_3_17_2_1_1675447221528_20915 { font-size: .4em; max-width: 100%; } } /* END COOKIE SCRIPT REPORT ACCORDION */