Moving the Weglot widget to the top of the page

Hi All!

Does anyone know how to move the language icons from the bottom right of the page to the top nav bar or below? Anywhere where it's not interfering with our chat box 😐

Thanks!

What is your site url? We can help easier

Hey there,

You can use the language switcher visual editor (new feature!) to change the position of the language switcher (Settings > Language Switcher > Visual Editor). You can also check our support documentation to learn how to change the position of the language switcher via other methods.

Hope this helps but don't hesitate to reach out to us at support@weglot.com if you need any help with it!

On 3/21/2022 at 9:24 AM, tuanphan said:

What is your site url? We can help easier

Hi Tuan, 

I want to do the same - I want to move the language selector to sit to the left of the Cart on desktop, and at the bottom of the menu on mobile. Can you help? 🙏

https://www.weddingalbums.ie/

On 9/11/2023 at 2:41 AM, DreamrW said:

Hi Tuan, 

I want to do the same - I want to move the language selector to sit to the left of the Cart on desktop, and at the bottom of the menu on mobile. Can you help? 🙏

https://www.weddingalbums.ie/

 

 

 

Move this?

On 9/14/2023 at 8:43 AM, tuanphan said:

Move this?

Yes please Tuan! 

On 9/16/2023 at 9:24 PM, DreamrW said:

Yes please Tuan! 

Try Website > Website Tools > Custom CSS
 

/* WeGlot position */
.wg-default, .wg-default .country-selector {
    bottom: unset !important;
    top: 30px;
}

3 hours ago, tuanphan said:

Try Website > Website Tools > Custom CSS
 

/* WeGlot position */
.wg-default, .wg-default .country-selector {
    bottom: unset !important;
    top: 30px;
}

 

Thanks Tuan. That works perfectly on desktop but on mobile it hides the burger menu. See screen shot. 

Is there a workaround for mobile? 

On 9/18/2023 at 2:16 PM, DreamrW said:

Thanks Tuan. That works perfectly on desktop but on mobile it hides the burger menu. See screen shot. 

Is there a workaround for mobile? 

What should it look like on mobile? Or you can use this code to move WeGlot on desktop only

@media screen and (min-width:992px) {
/* WeGlot position */
.wg-default, .wg-default .country-selector {
    bottom: unset !important;
    top: 30px;
}
}

4 hours ago, tuanphan said:

What should it look like on mobile? Or you can use this code to move WeGlot on desktop only

@media screen and (min-width:992px) {
/* WeGlot position */
.wg-default, .wg-default .country-selector {
    bottom: unset !important;
    top: 30px;
}
}

 

Perfect Tuan! 

Is it possible to fix the weglot widget to scroll back with the menu? 😬

On 9/21/2023 at 7:51 PM, DreamrW said:

Perfect Tuan! 

Is it possible to fix the weglot widget to scroll back with the menu? 😬

What do you mean? You want WeGlot won't sticky on scroll or?

On 9/23/2023 at 10:08 AM, tuanphan said:

What do you mean? You want WeGlot won't sticky on scroll or?

Yes please Tuan, I want the Weglot widget to remain fixed in the menu when the page scrolls rather than move with it, as per the screen shot if possible. 

Add to bottom of Code Injection > Footer

<script>
   $(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > 150){
    $('div.weglot-container').addClass('hide');
  }
  else{
    $('div.weglot-container').removeClass('hide');
  }
});
</script>
<style>
  .hide {
    visibility: hidden !important;
}
</style>

On 10/7/2023 at 10:20 AM, tuanphan said:

Add to bottom of Code Injection > Footer

<script>
   $(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > 150){
    $('div.weglot-container').addClass('hide');
  }
  else{
    $('div.weglot-container').removeClass('hide');
  }
});
</script>
<style>
  .hide {
    visibility: hidden !important;
}
</style>

 

Smashing, thanks once again Tuan!

Hello Tuanphan, 

I don't know how to move the weglot button to the right just below the last menu item (REACH OUT).

Website: www.hellocinnamon.com

Currently, I am split navigation code that allows divided menu items with the logo in the middle. 
 

===================================
    SPLIT NAVIGATION STYLING
===================================
*/
@splitAfterItem: 4;
@actionSize: 1px; 
@logoSpacing: 1vw;

//Width at which nav will stack
@media screen and (min-width:1200px) {
  
//Dynamic Nav font size
#header .header-nav-item {
  font-size: clamp(8px,calc(~".6vw + 5px"),18px);
}

//Split Structure
#header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
  display: grid;
grid-template-columns:1fr auto 1fr;
  .header-nav,.header-title {
    grid-row-start: 1;
  }
  .header-nav { margin-top: 0; }
  .header-nav-item a {
    opacity: 0;
    transform: none!important;
    transition: opacity .3s linear;
  }
  &.has-nav .header-nav-item a{opacity:1!important;}
.header-title{grid-column-start:2;}
@splitOne: @splitAfterItem + 1;
.header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;}
.header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;}
//Left side nav
.header-nav:first-child {
  display: block;
  text-align: right;
  margin-right: @logoSpacing;
  .header-nav-list {
    justify-content: flex-end;
  }
}
//Right side nav
.header-nav:not(:first-child) {
  text-align: left;
  margin-left: @logoSpacing;
.header-nav-list{justify-content:flex-start;}
}}}
//Give nav more width
#header .header-layout-branding-center-nav-center .header-display-desktop {
  .header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - @{actionSize} * 2");
  } 
.header-actions{
  width:@actionSize;
  flex: 0 1 @actionSize;
  max-width: @actionSize;
  }
  //hide left side nav when stacked
.header-nav:first-child {
  display: none;
}
}

.header-title-logo a {
    max-height: unset !important;
}
/*
===================================
    end SPLIT NAVIGATION STYLING
===================================
*/

Thanks in advance. 
 

On 10/20/2023 at 4:11 AM, Mary_DG said:

Hello Tuanphan, 

I don't know how to move the weglot button to the right just below the last menu item (REACH OUT).

Website: www.hellocinnamon.com

Currently, I am split navigation code that allows divided menu items with the logo in the middle. 
 

===================================
    SPLIT NAVIGATION STYLING
===================================
*/
@splitAfterItem: 4;
@actionSize: 1px; 
@logoSpacing: 1vw;

//Width at which nav will stack
@media screen and (min-width:1200px) {
  
//Dynamic Nav font size
#header .header-nav-item {
  font-size: clamp(8px,calc(~".6vw + 5px"),18px);
}

//Split Structure
#header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
  display: grid;
grid-template-columns:1fr auto 1fr;
  .header-nav,.header-title {
    grid-row-start: 1;
  }
  .header-nav { margin-top: 0; }
  .header-nav-item a {
    opacity: 0;
    transform: none!important;
    transition: opacity .3s linear;
  }
  &.has-nav .header-nav-item a{opacity:1!important;}
.header-title{grid-column-start:2;}
@splitOne: @splitAfterItem + 1;
.header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;}
.header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;}
//Left side nav
.header-nav:first-child {
  display: block;
  text-align: right;
  margin-right: @logoSpacing;
  .header-nav-list {
    justify-content: flex-end;
  }
}
//Right side nav
.header-nav:not(:first-child) {
  text-align: left;
  margin-left: @logoSpacing;
.header-nav-list{justify-content:flex-start;}
}}}
//Give nav more width
#header .header-layout-branding-center-nav-center .header-display-desktop {
  .header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - @{actionSize} * 2");
  } 
.header-actions{
  width:@actionSize;
  flex: 0 1 @actionSize;
  max-width: @actionSize;
  }
  //hide left side nav when stacked
.header-nav:first-child {
  display: none;
}
}

.header-title-logo a {
    max-height: unset !important;
}
/*
===================================
    end SPLIT NAVIGATION STYLING
===================================
*/

Thanks in advance. 
 

Try this CSS code

.header-actions.header-actions--right {
    position: absolute;
    right: 0;
    bottom: -10px;
}

Thanks, Tuanphan, we had to later remove it since it was cost-restrictive. Appreciate your response.