Clickable phone on navbar or topbar

[yinon2b]

Hi
I would like to have on my site tobefilms.co.il clickable phone number and WhatsApp icon on the navbar. preferably on mobile only.
If it is not possible I would like to have it on the topbar, as I tried on my site, and have the topbar fixed.
On my site now When I made the icon larger they squeeze not so nicely, also the number went on top when viewing on mobile.
How can that be achieved?
Thank you
Yinon

[jumar]

Hello @yinon2b,

Thanks for writing in!

I recommend you to make WhatsApp icon and phone number clickable across all devices as this is useful for visitors of your site.

Moreover, I could only point you to the direction as this require deep customization and outside of our support scope. You will need to hire a developer to do this.

To start, please first adjust the margins in your social icons.

Then add this code into X > Theme Options > CSS

@media (max-width: 767px) {
     .rtl .x-topbar .p-info {
         float: right !important;
     }
     .rtl .x-topbar .x-social-global {
          float: left !important;
     }
}

For the clickable phone number, please add this:

jQuery(document).ready(function($) {
    var regex = /((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/g; 
    var text = $(".rtl .x-topbar .p-info").html();
    text = text.replace(regex, "<a href=\"tel:$&\">$&</a>");

    $(".rtl .x-topbar .p-info").html(text);
});

This code will update your phone number at the top of your navbar to a text link.

While for the WhatsApp icon, kindly set your link to phone:

Hope I gave you some points.