The DIVI WordPress theme has a phone number in the secondary header but, as many of us have noticed, it is not clickable on mobile devices. Even if you place a valid ahref tag (tel:) in the same field still nothing happens and the link does not work. Here is the thing that worked out for me.
1. Insert the following script in the header
Navigate to Divi > Theme Options > Integration > “Add code to the < head > of your blog” and insert the following code:
<script type="text/javascript">
jQuery(document).ready(function(){
var number = jQuery('span#et-info-phone').text();
var tel = "tel:"+ number;
jQuery('span#et-info-phone').text('');
jQuery('span#et-info-phone').prepend('<a href=""></a>');
jQuery('span#et-info-phone a').text(number);
jQuery('span#et-info-phone a').attr('href',tel);
});
</script>2. Insert the phone number
Go to Appearance > Customize > Header & Navigation > Header Elements and place the phone number in the PHONE NUMBER field. In case this does not work after the first save, go back and enter the number in the following format:
<a href="tel:+381112994601" rel="nofollow">011/299-4601</a>
Save, reload the front page and I hope you will enjoy the clickable phone link in DIVI WordPress theme.
