Weglot language-switch button

Design help General
1

Hi there,

can anyone help me with customize the language switch button from Weglot??
I implemented weglot in my project and it works fine so far. But how can I change the language switch button from the bottom right corner in my top navigation menu?

Link to site:

Here is my site Read-Only-Link:

https://preview.webflow.com/preview/ar-ingenieure?utm_medium=preview_link&utm_source=dashboard&utm_content=ar-ingenieure&preview=9875b2d948ac3610e515f26c7bad0987&mode=preview

This is a example how i want it to look:

https://siku-project.com

Thanks for your help!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey @KlaraKopf,

You’ll probably have a greater chance of someone helping you if you can share your project’s read-only link with us :slight_smile:

1 Like
3

Oh, thanks :wink:
I´m new here.

4

No problem!

I can’t see how you’ve inserted it into your site. Is it some custom code, somewhere? Or an HTML embed?

Also could you put the original link to your site up as well, please? I’m guessing it’s custom code as I can’t see it in the Webflow Designer (code only shows on published sites).

Thanks!

5

i inserted a piece of custom code (Head Code):

Bildschirmfoto 2020-02-18 um 14.34.31
Bildschirmfoto 2020-02-18 um 14.34.312330Ă—718 55.3 KB

6

I’m guessing you’re going to need to customise the Weglot widget yourself. This is from their website:

image
image533Ă—950 89.3 KB

I don’t think this is something you’ll be able to change within Webflow itself, as I’m guessing the script used determines the placement.

8

Here is the header code from the website you wish to imitate. As you can see, there is more code than you have in yours. It seems to be telling the code to target Header-nav-inner and Mobile-overlay-menu-main, for example.

image

9

ok cool, I will check.
Thanks for your help.

10

hi there - I have the same question and would like to position my language-switch button the same way. can someone please clarify how this was done?

thanks,
Duncan

11

I’m using weglot for my translations as well, so exact same issue

12

Hi Duncan_Anderson,

you can put this piece of code in the custom code field in the project settings of your weglot account:

.wg-default, .wg-default .country-selector {
position: fixed!important;
top: 20px!important;
bottom: auto!important;
right: 110px!important;
}
@media screen and (max-width: 980px)
{
.wg-default, .wg-default .country-selector {
right: 70px!important;
}
}

This worked for me! Give it a try.

1 Like
13

Ah - excellent. I had no idea there was a place to put CSS in weglot. Thank you!

14

you´re welcome! Let me know if it works.

1 Like
15

Hi, thanks for sharing this piece of code! I’m encountering the same problem but can’t seemed to find where to insert this code in my Weglot account. Could you share where do I insert this code?

16

Hey everyone,

Eugene from Weglot here. We are working on a specific support doc to explain how to position your language switcher on Webflow (it will be done soon). Here is the gist of it:

First option:
You can create a div where you want the Weglot switchers to be and add the following id to it: weglot_here. This should place the Weglot switcher in the desired position.

Second option:
In order to add the Language Switcher to your menu, you can use the “Switchers” option to add to your Weglot.initialize code as you can see attached and in the documentation below
-----> Options - Weglot

See the example below:

<script>
    Weglot.initialize({
        api_key: 'YOUR_API_KEY',
        switchers: [
        {
            // Same as button_style at root
            button_style: {
                full_name: true,
                with_name: true,
                is_dropdown: false,
                with_flags: true,
                flag_type: "circle",
                invert_flags: false
            },
            // Move switcher somewhere in the page
            location: {
                target: ".header-nav",
                sibling: null
            }
        }
    ]
    });
</script>

Then, you will just have to replace the target element (".header-nav") by the CSS selector of the parent element where you want the language switcher to be placed.

For instance, if you want to add it to your menu:
<nav class="menu">

Your target line will be:
target: ".menu",

Third option:
Finally, another option to move the button will be to create languages elements into your native menu and link it with the translation hooks below
----> Language link Hooks - Weglot

For instance, you create a “Languages” item menu with “English” and “Français” as sub-menu.
English will have the link #Weglot-en and “Français” will have the link #Weglot-fr

If you need any help, don’t hesitate to contact our support team: support@weglot.com
They’ll be happy to help you :slight_smile:

2 Likes