Translate button display position for mobile devices

nilla2014 · Member · Oct 24, 2017 at 9:41 am
Copy link

Add topic to favorites
I’ve included a widget Translate button at the top of my side bar.

Although the button displays well for a desktop/laptop, when viewed on any mobile device, it’s useless. The sidebar is pushed down below the Comments area, so a user has to scroll down to the very bottom of the post before even realising the button exists.

1. Is there any way I can include a Translate button at the top of each post for mobile devices?

2. Can I include a Translate button in the Top nav bar area? Perhaps this may be an alternative to a side-bar widget?

As most users are on mobile devices these days, I don’t see the point of this translate button’s position.

Many thanks

The blog I need help with is: (visible only to logged in users)
siobhyb · Member · Oct 24, 2017 at 10:51 am
Copy link
Hi there,

You could use the following custom CSS to move the Google Translate widget to the top of devices that are 600px in width or smaller and push the header down:
```
@media screen and ( max-width: 600px ) {
    #google_translate_widget-2 {
         position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .site-header {
        margin-top: 100px;
    }
}
```
Moving the widget to the navigation bar is a little trickier, custom CSS isn’t really intended for these sort of large layout changes and I can’t think of a good way to get the widget to stay in the navigation bar across all browsers and devices.

You could perhaps move the widget so that it appears to the upper right of the screen using the following:
```
#google_translate_widget-2 {
        position: absolute;
        top: 0;
        left: 0;
}
```
Let me know if the above helps out! As a WordPress.com Premium owner, you can also contact us directly via the following form if you want a speedier answer. :)

https://wordpress.com/help/contact

Thanks!
nilla2014 · Member · Oct 24, 2017 at 4:49 pm
Copy link
Thank you for the code.
I’ve gone with the top one and went to WP Chat to get an edited version for a tablet.

Thanks again! :)
siobhyb · Member · Oct 24, 2017 at 5:06 pm
Copy link
Perfect! :) You know where to find us if extra questions come up.

No items found.