Contact Info in header not working properly on mobile

Hi guys,

I’ve included my contact info in the header of my site (www.bistrocamille.com.au) but it’s not working correctly on mobile. When you tap the phone number on the mobile version it doesn’t open up the phone dialer app like it should. When you tap the email address it opens the phone’s mail app but my email appears with the end of the phone number at the start of the email, in our situation it is...8411info@bistrocamille.com.au

Cheers,

Will

Dear Will,

In order to enable this functionality, please try the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'

   var phone = $('.header-phone').html().replace('<i class="fa fa-phone"></i>', '');
   var email = $('.header-email').html().replace('<i class="fa fa-envelope"></i>', '');

   $('.header-phone').wrapInner('<a href="tel:'+phone+'"></a>');
   $('.header-email').wrapInner('<a href="mailto:'+email+'"></a>');

})(jQuery);   

  1. Update

  2. Apply the following custom CSS code either through the child theme’s style.css or Simple Custom CSS plugin


.header-contact a{
   color: inherit;
}

Regards,
Kharis

Hi Kharis,

I followed your steps however I can’t see any change on my mobile (in incognito tab)

Cheers,

Will

Hello there,

Please clear your mobile web browser’s cache and reload your site.

If your site is being cached by a plugin like W3 Total Cache, you should empty all cache.

Regards,
Kharis

Hi Kharis,

I’ve cleared the cache and tested on different devices and still not working.

Cheers,

Will

Dear Will,

I viewed the source code of your site, I noticed that you pasted the encoded code from email. Please replace it with this one.

Regards,
Kharis

Hi Kharis,

I’d like to include the address now in the header contact info too, would you mind sending me the custom Java for the address section similar to above?

Cheers,

Will

Hello there,

There is an option to enter the address on the below path already:

Appearance > Customize > Sydney Pro options > Header contact info > Address.

Doesn’t it work for you?

Regards,
Kharis

It does, but it appears in grey and doesn’t work on mobile without the custom java such as:

var phone = $(’.header-phone’).html().replace(’<i class=“fa fa-phone”></i>’, ‘’);
var email = $(’.header-email’).html().replace(’<i class=“fa fa-envelope”></i>’, ‘’);

$(’.header-phone’).wrapInner(’’);
$(’.header-email’).wrapInner(’’);

I imagine the extra code needed would look something like:
var address = $(’.header-address’).html().replace(’<i class=“fa fa-house”></i>’, ‘’);
and
$(’.header-address’).wrapInner(’’);

Hey Kharis,

Just wondering if I was clear enough on my last reply?
would be really great to find a solution for this as my address is currently invisible.

Cheers,

Will

Hello there,

I would like to apologize in advance for the delay.

Could you please share the temporary working login credentials to my email kharisblank@gmail.com, so I can take a closer look? Also please mention the link to this thread.

Regards,
Kharis

Resolved over email support.