Tagline disappeared

Hi, I have looked at all entries about this but I am afraid I do not understand the answers. I assume I can not see my site title and tagline because I have uploaded a logo. An answer I a saw about editing the " header.php file " I don’t know how to do.

I want to add a clickable phone number somehow and see a few tips about doing that part. Please help me and be more clearer so I can understand how to show the number.
Many thanks for your time. https://sandrockslodge.com

Hello there,

Have you set your site logo? If so, the tagline is invisible; it’s considered as an issue to resolve. But, it is intentionally designed that way. To display the tagline along with the logo, please follow this solution.

Regards,
Kharis

Hi thanks for your response. I have seen this reply before and as I a mentioned, I have no idea what it is I am meant to do about editing the ” header.php file ”. My website is using a child theme but I have no idea what this is just that I was told to do it. So i’m sorry but I don’t understand where to go to take out the code and replace it. But what I do know is that it is important to get the phone number into the header and make it clickable. So I would really appreciate very simple instructions.
Thanks and very much appreciated

Hello there,

The tagline won’t display a clickable phone number, even though it’s displaying. You would need either custom HTML code or jQuery solution. The simplest one is jQuery. Please follow the below 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($) {

  var phoneNm   = '1234'; // Phone number
  var phoneHTML = '<div class="my-phone-numb">Call us: <a href="tel:'+phoneNm+'">'+phoneNm+'</a></div>';

  $('.header-wrap .col-md-4').append(phoneHTML);
  
})(jQuery);  

  1. Update
  2. To style it, add the below custom CSS code to Appearance > Customize > Additional CSS.

.my-phone-numb {
  color: #fff;
}

.my-phone-numb a {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

.my-phone-numb a:hover {
  color: #d65050;
}

Regards,
Kharis

Thank you sooooooooooo much! It works perfectly

:slight_smile:

Hi, sorry, one more question, can there be 2 numbers for 2 different countries?
If so please could you show how I should edit your script.

Thanks a whole lot!

Hello there,

Try using this code:


;(function($) {

  var phoneNm   = '1234'; // Phone number
  var phoneNm2  = '4567'; // Phone number 2
  var phoneHTML = '<div class="my-phone-numb">Call us: <a href="tel:'+phoneNm+'">'+phoneNm+'</a> (English) / <a href="tel:'+phoneNm2+'">'+phoneNm2+'</a> (Kiswahili)</div>';

  $('.header-wrap .col-md-4').append(phoneHTML);
  
})(jQuery);

Regards,
Kharis