Docs

[shadowoflight]

Hey

I’m trying to add translation flags into the top bar.

I’ve followed instructions here: https://community.theme.co/forums/topic/google-translate-flags-in-topbar-or-menubar/

1. Despite having the latest xtheme, I also had to create the _topbar.php file instead for it to work. Adding the code into the child’s function.php didn’t work. It that supposed to be the case?

2. How can I get the flags to align with the other icons in the top bar? I tried adding the ‘inline’ code from the above post into the css customiser but that didn’t seem to work. My url – http://bit.ly/2eQ5WaD

3. For mobile, the social icons in the top bar is spread our nicely. Once aligned, will it also appear in a line with the social media icons in mobile?

Thanks!

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.gtranslate {
    margin-top: 12px;
}
@media (max-width: 979px){
    .gtranslate {
        float: none !important;
        margin: 0 auto;
        display: block;
    }
    #flags {
        float: none;
        width: 100%;
        text-align: center;
    }
    #flags ul {
        float: none !important;
    }
    #flags li {
        float: none !important;
        display: inline-block;
    }
}

http://i.imgur.com/oUaT6Ag.png

http://i.imgur.com/gGoc2uo.png

Hope it helps 🙂

[shadowoflight]

Yeap it works thanks!

Just 1 more thing – is there a way for me to adjust the space between the flags?

Also, I’m assuming my child theme setup is correct?

[Friech]

Hi There,

Yes, your child theme seems fine.

To adjust the space between the flags, you can add this under Custom > CSS in the Customizer.

.x-topbar #flags ul li {
	margin-right: 7px !important;
}

Feel free to adjust the value.

Cheers!

[shadowoflight]

wee working, thanks!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts