Header Builder - Problem with layout

Support
#1

Hello,

I am having problem to achieve exactly what I what with the header builder with Theme Pro.

I have an image on the left side on the header, with an over effect. I achieve the hover effect with a class

.contact-email:hover {
  content: url(/wp-content/uploads/2017/07/Formulaire-Contactez-nous-Email-Hover.png);
  z-index: 999;
  width: 50% !important;
  height: auto !important;
  display: inline-block;
  padding-top:8px
}

The image is made with a content area:
<a href="" class="contact-email"><img src="/wp-content/uploads/2017/07/Formulaire-Contactez-nous-Email.png" class="contact-email" width="50% !important" height="auto !important"></a>

  1. How can I get the image hover effect to be exactly in the same size and position of the other image ?
  2. How can I have the the phone number on the right to be closer no the image (no big space between the two elements) ?

URL: https://mandtis.fr/
Pwd: E-MM

Thanks for your help.
Antoine

#2

Hey @Camilletra,

  1. How can I get the image hover effect to be exactly in the same size and position of the other image ?

Decrease padding-top to 6px in CSS.

  1. How can I have the the phone number on the right to be closer no the image (no big space between the two elements) ?

Add following CSS
.hm4.x-text {
padding: 0px;
}

Hope this helps!

Regards

#3

Hello,

Thanks for the explanation. I did not manage to make any of those working. I am not sure however that I did understand it correctly. Could you please explain me again how I should make it works?

I did try to add the CSS and the style.css of the child theme but nothing happened. I could not find how to reduce the padding-top to 6 px in CSS.

Thanks,
Antoine

#4

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#5

Here is it.

#6

Hello There,

Thanks for updating in! To best resolve your issue, please make use of this code first:

<a href="" class="contact-email"><img class="active" src="/wp-content/uploads/2017/07/Formulaire-Contactez-nous-Email.png" width="50% !important" height="auto !important"><img class="hover" src="/wp-content/uploads/2017/07/Formulaire-Contactez-nous-Email-Hover.png" width="50% !important" height="auto !important"></a>

And then you will need this css code:

.contact-email img.hover,
.contact-email:hover img.active {
  display: none;
  transition: all 0.5s ease;
}

.contact-email:hover img.hover {
  display: inline-block;
  transition: all 0.5s ease;
}

We would loved to know if this has work for you. Thank you.

#7

Hello,

Thanks for the code you provided. There are still 2 problems :

  1. By the hover, the phone number is further on the right side. It makes like if there would be the second image which you don’t see.
  2. By the hover, the image is slightly lower than the first one.

How can I fix this?

Thanks,
Antoine

#8

Hi again,

Please change your code to this:

.contact-email:hover {
    content: url(/wp-content/uploads/2017/07/Formulaire-Contactez-nous-Email-Hover.png);
    z-index: 999;
    width: 50px !important;
    height: auto !important;
    display: inline-block;
    padding-top: 8px;
}

This should fix both of your issues. Cheers!

#9

Thank you for the code your provide. I am a bit confused as I don’t manage to get it work complety.

I needed to adapt a bit the code to make it works (not the CSS you provide, but the code in the content area of the header). However, I still have the hover image which is lower than the other image. Any idea how to solve it?
https://mandtis.fr/

Moreover, I use a similar header for a few other pages. The code is exactly the same but:

  1. there is a gap between the image and the phone number, which disappear by the hover (good)
  2. the hover image is exactly in the same position as the other image (good)
    https://mandtis.fr/actualites/

I really don’t understand why the two headers are different (this is the same code). I would appreciate your help to fix it.

Thanks,
Antoine

#10

Hello There,

You need to adjust the padding top. Instead of 8, please use 6 pixels.

.contact-email:hover {
    content: url(/wp-content/uploads/2017/07/Formulaire-Contactez-nous-Email-Hover.png);
    z-index: 999;
    width: 50px !important;
    height: auto !important;
    display: inline-block;
    padding-top: 6px;
}

And for the other header, please set a maximum width for the container of the image so that it will not move when you hover over it.

Hope this helps. Please let us know how it goes.