[Support request] Sticky Whatsapp icon on Mobile

[Erwin]

Hello GP team,

I like to make an icon on the mobile version of my website. The icon has to be in the right bottom corner and has to be sticky.

– I have created a block element with a whatsapp icon (What hook should I use?)
– How to make it sticky?

Thank you in advance.

[David]

Hi there,

can i see the block on your site ?

[Erwin]

Yes

[Fernando]

Hi Erwin,

Can you try adding this through Appearance > Customize > Additional CSS:

.gb-container.gb-container-228de9bd {
    position: fixed;
    bottom: 0;
    right: 0;
}

Add this PHP snippet as well:

add_filter( 'generate_element_display', function( $display, $element_id ) {
    if ( 100 === $element_id && ! is_wp_mobile() ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

Replace 100 with the Block Element ID.

Getting the Element ID: https://share.getcloudapp.com/YEuDdrnQ

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

This code ensures that your Whatsapp button only appears on mobile devices.

[Erwin]

Hello Fernando, I have added your PHP snippet with php snippet plugin(including the element ID). Now I got a notification (back- and frontend):

*translated: “A critical error has occurred on this site.”

[David]

Remove the PHP Snippet, its not required.
Instead select the Container Block with the WhatsApp icon, and in Advanced > Additional CSS Class(es) add: hide-on-desktop hide-on-tablet

[Erwin]

Well, first I have to find out how to restore my website. I can’t login anymore…

I have already hide it on dekstop and tablet in the container functions.

[Erwin]

The backup is restored. The CSS worked. Thanks

[David]

Ah sorry about that, glad to hear you got it working!

[Author]

Posts