Image in navbar should change according to language (but it's not)

Hi everyone,

I’m building my second page in Webflow, and I’ve encountered some problems with my nav menu. The page should be translated when you press the flag image (so the danish page has a french flag and links to that page and vice versa).

My first solution was to make a link block with the image contained and make a property. This seemed to work, but my client told me their link didn’t respond, and it didn’t work on my toggle preview either.

After reading some tips on this forum I tried to make the link the same way as my other nav links, having the image as background image instead. But now I can’t figure out the way to make the properties function work :frowning:

Any suggestions on how to make this work?

Thanks, Kamma


Here is my site Read-Only: Webflow - Bureau France

Are you using Webflow localization? What I’m seeing appears to just be two pages that you’re navigating between, and a nav component that adjusts the flag and links.

Your homepage navs fine to your /fransk page

https://bureau-france.webflow.io/

Your /fransk page changes the image but just has a link to itself.
You probably want that link to be different.

The nav construction, I’d update that as well so that you have a link-wrapped-image for your flag, and so that both the link and the image are bound to component properties that you can change at the instance level.

Thank you for your answer!

No, I didn’t use the localization add on - is it necessary when only dealing with one translation? The costumers would mainly be from Denmark. I would like to minimize the cost of the site :slight_smile:

The problem is, that I don’t get how to change the link (and picture/flag) according to the active page. When you mention the link-wrapped-image, do you mean putting an image inside a link block? When I tried this, the links didn’t seem to work in action (it just linked to webflow.com/…).

https://preview.webflow.com/preview/bureau-france?utm_medium=preview_link&utm_source=designer&utm_content=bureau-france&preview=f3b4af1352a5450868cda33cdb8878dd&workflow=preview

I tried doing the flag in a link with default properties. When clicked it navigates to https://webflow.com/@fransk instead of the chosen page

Up to you, it solves a lot of problems and simplifies updating the translation. But there are other ways to make localized sites.

I think you will want to read up on components, esp. component properties and component instances. That seems to be where you’re stuck understanding how to set different links and images for each of the 2 pages.

You probably didn’t set the link. Also, don’t test links in the designer or even preview mode. Publish the site and test them there.

Working in the picture as a link worked now :slight_smile: Thank you for your support! I’m very new at Webflow, so still learning - will definitely look up more on component properties (they are a bit messy now I see, but it works so I’m happy :wink: )