Archived topic
Top bar element call button
3 replies · Started by Ron on November 23, 2021
Top bar element with call button
I only want to show call button on mobile screen and just list phone number for tablet and desktop views any help would be appreciated
Hi Ron,
You can create a Block element that switches what it displays depending on viewport.
Example: https://share.getcloudapp.com/llukWqX4
In this video, I've created 2 layouts within the Block element.
On the Block Element's settings, set the type to "Hook" and set the hook to "before_header".
The first layout containing phone numbers will be for tablets and desktops. The second layout with the "CALL NOW!" button will be for mobile.
After creating the layouts, on the first layout, select its container and add hide-on-mobile on its additional CSS class(es) text field under the Advanced tab.
On the second layout, select its container and add hide-on-desktop hide-on-tablet on its additional CSS class(es) text field under the Advanced tab.
After you're done with the layouts and assignments of classes, set the display rule location to "Entire site" if you wish to display it site-wide. You can also modify this if you wish to display it on specific pages only. :)
Once all is set and done, you can publish this Block element. It then should display on your site. :D
Thank You Elvin your video helped
Glad to be of any help. No problem. :D
