Language switch: transforming text into flags

Zenocavallari · May 8

URL: cantinalepietre.com

Hi guys, I have two language switch ENG and ITA for Italian, I want to use flags instead.

I've tried adding this code:

/* REPLACE ENG/ITA WITH FLAGS */
$('.lang-en').html('<img src="https://cdn.countryflags.com/thumbs/united-kingdom/flag-round-250.png" alt="English">');
$('.lang-it').html('<img src="https://cdn.countryflags.com/thumbs/italy/flag-round-250.png" alt="Italiano">');

But it's not working since the flags cover all the items in the menu

tuanphan · May 10

Try adding to Design > Custom CSS

header#header div.header-nav-item:last-child>a {
    background-image: url(https://cdn.countryflags.com/thumbs/united-kingdom/flag-round-250.png);
    background-size: 30px;
    background-repeat: no-repeat;
    color: transparent;
}
header#header div.header-nav-item:nth-last-child(2)>a {
    background-image: url(https://cdn.countryflags.com/thumbs/italy/flag-round-250.png);
    background-size: 30px;
    background-repeat: no-repeat;
    color: transparent;
}

Zenocavallari · May 16

works perfectly! thanks

Language switch: transforming text into flags

Recommended Posts

Zenocavallari

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

Posted Images

tuanphan

Link to comment

Zenocavallari

Link to comment

Create an account or sign in to comment

News

tuanphan

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources