Weglot button placement

Site URL: https://en.uppercutdanseteater.dk/

Hey! 

I would really appreciate help with the position of the weglot button on my webiste. I would like to have it on the right top corner (right now it's on the right button corner).

Thank you in advance!! 

Add to Design > Custom CSS

.wg-default, .wg-default .country-selector {
    bottom: unset !important;
    top: 0 !important;
}

Hi @tuanphan (or anyone else that can assist!)

I am wondering if you can help me move the Weglot translator to my secondary nav where the green bar is instead. Right now it's positioned right next to the CTA button in the primary nav. I am in Fluid Engine.

Thanks!

https://flute-herring-aws3.squarespace.com/
pass: art

19 hours ago, jesswp said:

Hi @tuanphan (or anyone else that can assist!)

I am wondering if you can help me move the Weglot translator to my secondary nav where the green bar is instead. Right now it's positioned right next to the CTA button in the primary nav. I am in Fluid Engine.

Thanks!

https://flute-herring-aws3.squarespace.com/
pass: art

Move this?

On 8/28/2022 at 5:29 AM, tuanphan said:

Move this?

Yes @tuanphan!!!

On 8/28/2022 at 5:29 AM, tuanphan said:

Move this?

Hey @tuanphan! Just wanted to see if you have an update for this by chance. Hope you are having a great weekend.

10 hours ago, jesswp said:

Hey @tuanphan! Just wanted to see if you have an update for this by chance. Hope you are having a great weekend.

Add to Last line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('.header-display-desktop .header-actions.header-actions--right').clone().appendTo('div#wm-subnav>nav');
	});
</script>
<style>
  div#wm-subnav .header-actions-action.header-actions-action--cta {
    display: none;
}
</style>

On 9/4/2022 at 10:48 PM, tuanphan said:

Add to Last line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('.header-display-desktop .header-actions.header-actions--right').clone().appendTo('div#wm-subnav>nav');
	});
</script>
<style>
  div#wm-subnav .header-actions-action.header-actions-action--cta {
    display: none;
}
</style>

 

It seems to be appearing in both places now? @tuanphan

It also seems like it's cut off when viewing incognito mode.

On 9/6/2022 at 8:29 PM, jesswp said:

It seems to be appearing in both places now? @tuanphan

It also seems like it's cut off when viewing incognito mode.

Add this code under code I sent

<style>
  .header-display-desktop .header-actions.header-actions--right>div.language-picker {
    display: none;
}
</style>

and try checking to see if language picker still works properly or not.

4 hours ago, tuanphan said:

Add this code under code I sent

<style>
  .header-display-desktop .header-actions.header-actions--right>div.language-picker {
    display: none;
}
</style>

and try checking to see if language picker still works properly or not.

Hi @tuanphan

 It still seems to be cutting off unfortunately when I am in incognito mode. See video attached! 

Hi! Maybe you also can help me @tuanphan?

I would like to move the language widget to the right of the button or to the announcement bar. I have tried some codes but it dosent work.

Is it also possible som change to only have the flag or EN/SV?

On 11/1/2023 at 7:06 PM, STRANA said:

Hi! Maybe you also can help me @tuanphan?

I would like to move the language widget to the right of the button or to the announcement bar. I have tried some codes but it dosent work.

Is it also possible som change to only have the flag or EN/SV?

What is your site url?

Hi @tuanphan!

Would you be able to help me as well?

1. I copied your HTML codes above, but my login icon also switches place with the language selector... I would like it to stay ONLY in the main navigation on the left of the button.

2. Also, I would like to hide the secondary nav on mobile.

3. Is it possible to only show the FR/ENG flags instead of the actual icon and text?

Thanks alot!

https://snail-ray-daxz.squarespace.com/
pass: freelance

On 11/28/2023 at 12:35 AM, abbiericher said:

Hi @tuanphan!

Would you be able to help me as well?

1. I copied your HTML codes above, but my login icon also switches place with the language selector... I would like it to stay ONLY in the main navigation on the left of the button.

2. Also, I would like to hide the secondary nav on mobile.

3. Is it possible to only show the FR/ENG flags instead of the actual icon and text?

Thanks alot!

https://snail-ray-daxz.squarespace.com/
pass: freelance

#1. You mean move this?

#2. You can use this CSS code (this code include mobile + tablet)

/* Hide secondary nav */
@media screen and (max-width:991px) {
div#wm-subnav {
    display: none !important;
}
}

#3. I see you figured it out?

7 hours ago, tuanphan said:

#1. You mean move this?

#2. You can use this CSS code (this code include mobile + tablet)

/* Hide secondary nav */
@media screen and (max-width:991px) {
div#wm-subnav {
    display: none !important;
}
}

#3. I see you figured it out?

1. I meant the green icon for login, but I figured it out! Thanks!

2. Great. Exactly what I needed!

3. Yes! But my client finally wants only FR/ENG to appear. Not the whole word (Francais/English) or the flags. Do you know how to change that with Weglot? Also, is it possible to move the language dropdown menu in front of the button? 

Big thanks! 🙂

On 11/29/2023 at 10:07 PM, abbiericher said:

1. I meant the green icon for login, but I figured it out! Thanks!

2. Great. Exactly what I needed!

3. Yes! But my client finally wants only FR/ENG to appear. Not the whole word (Francais/English) or the flags. Do you know how to change that with Weglot? Also, is it possible to move the language dropdown menu in front of the button? 

Big thanks! 🙂

Use this CSS code

.header-actions  .language-picker-content .language-item:nth-child(1) span:after {
   content: 'FR';
    font-size: 12px
}
.header-actions  .language-picker-content .language-item:nth-child(2) span:after {
   content: 'EN';
    font-size: 12px
}
.header-actions  .language-picker-content  .language-item span {
    font-size: 0
}
html[lang*="en-"]
 .language-picker .current-language-name, [lang="fr"] .language-picker .current-language-name  {
     font-size: 0 !important
}
html[lang*="en-"]
 .header .language-picker .current-language-name:after {
     content: 'EN';
    font-size: 12px !important
}
[lang="fr"] .language-picker .current-language-name:after {
     content: 'FR';
    font-size: 12px !important
}
.header-actions .language-picker-desktop .language-picker-content {
   padding-left: 0;
   padding-bottom: 0
}

.header .language-picker-content a {
    justify-content: center;
}

Thanks! 

But when I click on FR, its the english version that appears... Same for EN, its the french version that shows.

Ans I would like only FR or EN to appears once my choice is made... Not Francais or English

On 12/1/2023 at 4:05 PM, abbiericher said:

Thanks! 

But when I click on FR, its the english version that appears... Same for EN, its the french version that shows.

Ans I would like only FR or EN to appears once my choice is made... Not Francais or English

Hi @tuanphan! Any update?

Try this new code

/* on English */
html[lang*="en"] div.language-item:nth-child(1) a span {
    font-size: 0;
}
html[lang*="en"] div.language-item:nth-child(1) a span:before {
    content: "EN";
    font-size: 16px;
}
html[lang*="en"] div.language-item:nth-child(2) a span {
    font-size: 0;
}
html[lang*="en"] div.language-item:nth-child(2) a span:before {
    content: "FR";
    font-size: 16px;
}
/* on FR */
html[lang*="fr"] div.language-item:nth-child(1) a span {
    font-size: 0;
}
html[lang*="fr"] div.language-item:nth-child(1) a span:before {
    content: "FR";
    font-size: 16px;
}
html[lang*="fr"] div.language-item:nth-child(2) a span {
    font-size: 0;
}
html[lang*="fr"] div.language-item:nth-child(2) a span:before {
    content: "EN";
    font-size: 16px;
}