Beyondspace

Hi there You can try this snippet, add it into Advanced-> Custom code injection document.addEventListener("DOMContentLoaded", function(event) { document.querySelectorAll(".summary-metadata-item.summary-metadata-item--date").forEach(function(el) { var modified = el.innerText.replace("–", "&"); el.innerText = modified; }); });

Hi there You can create a temp password for the access

You can set up the css for the image as img { width: 100%; hight: auto; } If you need specific help, kindly share your current site url,

What is your site password again, thanks

I will update accordingly

Your snippet seems worked well, I edit it to match the needs .Header-nav-item { position: relative; height: 60px; line-height: 60px; text-align: center; transition: 0.5s; padding: 0 20px; cursor: pointer; -webkit-transition: 0.5s; } .Header-nav-item:hover { background-color: transparent; border-color: transparent; color: #000000; } .Header-nav-item:hover:before { transition-delay: .2s; } .Header-nav-item:before { width: 0%; height: 100%; z-index: 3; content: ''; position: absolute; top: -20px; left: 0; box-sizing: border-box; transition: .2s; } .Header-nav-item:hover:before, .Header-nav-item.Header-nav-item--active:before { width: 100% !important; transition: .7s; } .Header-nav-item:before { border-bottom: 2px solid #000000; }

Glad it helps

You're right, my bad

Please try this, Insert the snippet into Design->Custom Css .header-title-logo img { max-height: 150px !important; } .header .header-title-nav-wrapper .header-nav { display: block !important; } .header .header-burger { display: none !important; }

Hi SeppeDP What is your site url?

It did slightly changes in your current solution, hopes it'll help <style> .language { position: absolute; z-index: 999; top: -20px; left: 0; display: inline-block; } .language a { border: 1px solid #000; margin: 0 5px; width: 40px; height: 20px; display: inline-block; background-position: center top; float: left; text-indent: -999999px; color: transparent; } .language [href="/en/home/"] { background: url(https://restcountries.eu/data/gbr.svg) no-repeat; background-size: cover; } .language [href="/de/home"] { background: url(https://restcountries.eu/data/deu.svg) no-repeat; background-size: cover; width: 33px } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { /* SETUP MULTI-LANGUAGE */ var defaultLanguage = 'de'; var lang = location.pathname.split("/")[1]; var defaultClass = 'lang-'+defaultLanguage+''; var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']"; if (lang == "" || lang.length > 2 ){ var lang = defaultLanguage; } /* ADD LANGUAGE CLASSES */ $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+''); $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () { var langType = $(this).attr('href').split("/")[1]; var multiLanguageClass = 'multilanguage lang-' + langType + ''; if (undefined !== langType && langType.length <= 2) $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass); }); $('nav button').each(function () { var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0]; var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + ''; if (undefined !== langTypeFolder && langTypeFolder.length <= 2) $(this).addClass(multiLanguageClass); }); /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */ if (lang == "en") { $('a[href="/"]').attr("href", "/en/home/"); } /* ADD EXCLUSION NAV ITEMS */ $('.exclude-me,.exclude-me a').addClass('exclude'); $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude'); /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */ $('.multilanguage:not(".lang-'+lang+',.exclude")').remove(); }); </script> <script> /*setup language switcher*/ $('.header-title-text').prepend('<div class="language"><a href="/de/home" class="lang-en">Deutsch</a><a href="/en/home/" class="lang-es">English</a></div>'); </script>

I can see these icons, is the issue sorted out?

Do you want it to display as flag image like this

Just PM you the detail

Hi Pandagal Your site is not accessible

Put the code I sent into this snippet @media screen and (min-width: 600px) { /*Copy them here*/ }

HI could you provide your site url to check?

I did some custom code for my client on this site, is it what you want? This feature is a custom plugin for squarespace http://recordit.co/p9VOuCKBkq

Hi Muffet24, Afraid there is no such option except image order, do you want to change the template files?

Can be, please paste this into Settings->Custom Css .header-layout-branding-center-nav-center .header-title-nav-wrapper { width: 100%; display: block; flex: 100%; }

Did you added the custom css I provided? Also the first 3 images is not the same size with the ones below, should be 500x500 dimension

Kindly check this snippet section[data-section-id="5ee902680f1cf9687c177bee"] { width: 100vw; } section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper { margin: 0; width: 100%; max-width: 100%; padding: 0 !important; } section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .content { width: 100% !important; } section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .sqs-block-image { padding: 0; } section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .sqs-block-image img { width: auto !important; height: 100% !important; }

It's ok bro, you good

Mine not jQuery, it's YUI library, goes along with Squarespace

This snippet will apply on all image grid site-wide .sqs-block-image { padding: 0 !important; } Or you can only need apply on home page only #collection-5ee237be059f9951fe95bf2c .sqs-block-image { padding: 0 !important; }