few issues with my multilingual web

Hi! I have a few issues with my new web, hope somebody can help me with some of them. I have the web in 3 languages now (planning to add a forth one). 

- Is there a way to change the CTA button depending the language you are navigating?

- when you access to the web you can see all the header links in all languages for a brief moment and then they dissaper. Is there a way to avoid that?

- Can I have 3 (or 4) different footers depending on the selected language? I seen a code somewhere but is only for two, the code is written to work for 3.

- Last doubt, the language selector links disappear when i scroll down, is there a way to anchor them always on the top no matter if I scroll down?

Can you share your website?

https://www.calmarrufes.com/

You have this in Custom CSS, and to keep the language switcher visible:

.language {
    position: absolute;
}

change to:

.language {
    position: fixed;
}

2 hours ago, Ricard said:

- Is there a way to change the CTA button depending the language you are navigating?

How do you want it to change?

2 hours ago, Ricard said:

- when you access to the web you can see all the header links in all languages for a brief moment and then they disappear. Is there a way to avoid that?

This is probably because of how you are hiding the links, how are you achieving this?

2 hours ago, Ricard said:

- Can I have 3 (or 4) different footers depending on the selected language? I seen a code somewhere but is only for two, the code is written to work for 3.

You can certainly switch out footer sections depending on which page you are on, it would take a snippet of style code added to the page header code injection. I would need to know all of the sections in the footer and how you currently have this set up to be able to give you the best way to do it.

Thank you so much again for your help.

Regarding the language switcher being not visible I put your custom css and gives me an error:

That wasn't all CSS to add, it was a suggestion to tweak the CSS you currently have

Regarding the CTA button I would like to have it like this:

catalan: Reserva ara

spanish: Reserva ahora 

english: Book now

And concerning how I am hiding the links, heres the full code:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function() {
    /* SETUP MULTI-LANGUAGE */
    var defaultLanguage = 'ca';
    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 == "es") {
      $('a[href="/"]').attr("href", "/es/inici/");
    }
       if (lang == "en") {
      $('a[href="/"]').attr("href", "/en/inici/");
    }

    /* ADD EXCLUSION NAV ITEMS */
    $('.exclude-me,.exclude-me a').addClass('exclude');
    $('.sqs-svg-icon--list a,.SocialLinks-link,.header-menu-controls-control').addClass('exclude');

    /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
    $('.multilanguage:not(".lang-'+lang+',.exclude")').remove();

/*setup language switcher*/
$('body').prepend('<div class="language"><a href="/ca/inici" class="lang-cat">cat</a> | <a href="/es/inici/" class="lang-es">esp</a> | <a href="/en/inici/" class="lang-en">eng</a></div>');
  
if (lang == "ca") {
$('section[data-section-id="6539a0872ecc656144301c97"]').remove();
}

if (lang == "es") {
$('section[data-section-id="650eb3301a6932094d727f7e"]').remove();
}
     
      if (lang == "en") {
$('section[data-section-id="650eb3301a6932094d727f7e"]').remove();
}
      
      
   
      });
</script>

1 minute ago, Ziggy said:

That wasn't all CSS to add, it was a suggestion to tweak the CSS you currently have

yeah, it works!! thanks!

Okay I managed to find a fix for the cta button and for the issue that showed all the links for a fraction of second. My only issue now is that I cannot have a different footer depending on the language. I have seen on the forum that somebody suggests to have multiple footers and then hide them depending on the language you are, but i cannot figure it out how to do it. 

On 10/28/2023 at 6:12 AM, Ricard said:

Okay I managed to find a fix for the cta button and for the issue that showed all the links for a fraction of second. My only issue now is that I cannot have a different footer depending on the language. I have seen on the forum that somebody suggests to have multiple footers and then hide them depending on the language you are, but i cannot figure it out how to do it. 

First, change this code

to this

 /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
    if (lang == "es") {
      $('a[href="/"]').attr("href", "/es/inici/");
	$('body').addClass('body-es');
    }
       if (lang == "en") {
      $('a[href="/"]').attr("href", "/en/inici/");
$('body').addClass('body-en');
    }
      if (lang == "fr") {
      $('a[href="/"]').attr("href", "/fr/inici/");
$('body').addClass('body-fr');
    }
      

Next, add 4 sections to Footer, then add this code to Website Tools (under Not Linked) > Custom CSS

/* this code will hide Section 2, 3, 4 when users on ES pages */
body.body-es footer.sections section:nth-child(n+2) {
	display: none;
}
/* this code will hide Section 1, 3, 4 when users on EN pages */
body.body-en footer.sections section:not(:nth-child(2)) {
	display: none;
}
/* this code will hide Section 1, 2, 4 when users on FR pages */
body.body-fr footer.sections section:not(:nth-child(3)) {
	display: none;
}
/* this code will hide Section 1, 2, 3 when users on CAT pages */
body:not(.body-en):not(.body-es):not(.body-fr) footer.sections section:nth-child(-n+3) {
	display: none;
}