Make the button float on all devices

Hello,

I love this plugin so i made some changes to make the button float and appear on all devices.

Here is what i did:

First add the function to your theme ( i recommend MU-PLUGIN)

function display_shortcode_as_float_button() {
        // Add your shortcode here
        $shortcode = '[auto_translate_button]';

        // Generate the HTML for the floating button
        $html = '<div class="floating-button">';
        $html .= '<div class="floating-button-content">' . do_shortcode( $shortcode ) . '</div>';
        $html .= '</div>';

        // Output the HTML
        echo $html;
}
add_action( 'wp_footer', 'display_shortcode_as_float_button' );

Next, some extra CSS

/* CSS for the floating button */

.auto_translate_minimalist .wpat_lang_item.wpat_lang_selected {
  border-color: #f0f0f0;
  border-width: 0px;
  margin-top: 16px;
	max-width: 80px !important;
	background-color: #EBA11C;
	color: white;
	margin-top: 0px;
}
#auto_translate_button_wrapper {
	min-width: 80px !important;
}

body > .skiptranslate:first-child {
    display: none;
}

/* CSS for the floating button */
.floating-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    /* Add any additional styles for the button's appearance */
}

#auto_translate_button_wrapper:not(.wpat_float) .wpat_minimalist_dropdown {
 /*Make it drop up*/
    top: auto;
    bottom: 100%;
}

My plugin settings:

Style: flags
Widget type: minimalist
Text displayed: Language code
Chevron style: none
Default Location: off
Show in Menu: none

Hope you like it ??

• This topic was modified 1 year, 7 months ago by playdiune.
• This topic was modified 1 year, 7 months ago by playdiune.