Header Contact Info - Adding A Second Phone Number

I am using the Sydney Pro Theme and I need to change the Header Contact Info. Default is: Phone, Email and Address. The customer has two telephone numbers that they would like to display in the Phone Field, a local number and a Toll Free Number. The problem is when I add their number such as (123) 123-1234 or Toll Free 1 (800) 123-1234 in the Phone Field, when you click it, the phone number shows the entire line of (123) 123-1234 or Toll Free 1 (800) 123-1234, which is obviously not a number, but a long phrase instead. They DO NOT intend to show an Email Address in the Email Field, so I currently have it as blank, which means it does not display. Is it possible to use the Email Field, with another “phone icon” and add the Toll Free Number there and have it function as a clickable telephone number?

Hello,

You can try to do this with jQuery.

  1. Please install and activate Insert Headers and Footers plugin that will allow you to insert JavaScript (jQuery) code.

  2. Go to your Dashboard → Settings → Insert Headers and Footers → add the following code to Scripts in Header section, and click Save button.

<script>
    jQuery(document).ready(function(){
        jQuery('.header-contact-info .header-phone').after(jQuery('<span class="header-phone"><i class="fa fa-phone"></i>Toll Free <a href="tel:1234567890">1234567890</a></span>'));
    });
</script>

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.