[Resolved] CSS for Language Toggle

[Grant]

Hello,

I have a multisite and have used a Hook in wp_head to create links to other sub-directories – different languages – in the multisite.

I would like to make them look better with some CSS, including adding in a South African flag to each one. Please can you make some suggestions on how best to do this?

Thanks,

Grant

[Ying]

Hi Grant,

Can you link us to your site so we can see your current settings?

[Grant]

Hi Ying,

Sure you can access it here.

[David]

Hi there,

if you’re happy using HTML then you could do something like this:

<div class="language-selector">
    <div class="grid-container">
        <a href="https://iafrika.org/xh/"><img src="isiXhosa-flag.jpg" alt="isiXhosa language" width="40" height="40">isiXhosa</a>
        <a href="https://iafrika.org/tn/"><img src="Setswana-flag.jpg" alt="Setswana language" width="40" height="40">Setswana</a>
    </div>
</div>

the <div> elements are there to provide some containment and a language-selector class if you want for CSS styling.
In each of then <a> you have an <img> tag that you will need to update the image urls and Alt tags for.

[Grant]

Works like a charm! Great support as ever, thank you!

[David]

Awesome – glad to be of help!

[Author]

Posts