Header contact - email link laptop size

Sydney Pro
#1

Hey !

  • I don’t know why the email of header contact is not clickable when I pass the mouse on email. It works only in mobile size. Did you already have this issue ? :upside_down_face:

  • Also, I would like to remove the text of email and have only the envelope icon email clickable (see the image in attachment). Do you know if it’s possible ? With the editor theme maybe ?
    No prob to remove the text in personnalize > header contact. I’ve more doubt about my capacity to put the email clickable only in the envelope icon ^^

Thanks a lot per advance for your help ! Have a beautiful day :blush:

Alexa

support-header-contact

#2

Hi,

Thank you for contacting us about our theme Sydney Pro. I am happy to help with your queries.

Try these 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
    jQuery(function($) {

      if( $('.header-contact-info .header-email').length ) {

    		var email = $('.header-contact-info .header-email a').attr('href');
    		$('.header-contact-info .header-email i').wrap('<a href="'+email+'"></a>');
        $('.header-contact-info .header-email > a').css('display', 'none');

      }

    });
  1. Update
  2. Clear cache before checking the result on your site.

Regards,
Kharis
aThemes Support

1 Like
#3

OMG you’re A-W-E-S-O-M-E !

Just a detail : the icon envelope is not clickable in large view (in my laptop for example) but no problem with mobile view and I reduce the width of the page :blush:
Do you know how to solve the issue ?

Thanks a lot for you help :star_struck:
I searched since a lot and lots of hours !!!

#4

You’re welcome!

Glad to know the code worked for you.

Is there any link you can share here, so I can do direct checking to get the exact solution?

Feel free to raise a new topic for other question.

Regards,
Kharis
aThemes Support

1 Like
#6

Hi,

Thank you for sharing the link.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .header-contact .social-links .menu-reseaux-sociaux-container {
        margin-left: 0;
        max-width: 100%;
      }
    }

Regards,
Kharis
aThemes Support

1 Like
#7

It works perfectly ! You’re awesome !! Thanks a million :star_struck:

1 Like
#8

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support