Sticky side button and hide/show on hero image

[divinedh]

디바인동화

Hello,

Im writing this to ask help for a problem that i cant find a solution anywhere…

I have added small contact button on the bottom of right side on main page.

And it looks fine and works fine.

But some areas, it is not showing properly. It is covered by menu area and where i place revolution slider.

Is there a way that i can position this button above everything? I tried z-index but doesnt help.

And it is not showing properly on internet explorer either. Should i add other css codes to make it work properly only for internet explorer? As you can see it from below, it is bit off from the edge and last letter is not showing on hover.

I also would like to hide this button only on an area where hero image is located. Is it possible?

[divinedh]

Thses are codes i use for this button.

[caldera_form_modal id=“CF5adb0684df741” type=“button” width=“500”]< i class=“x-icon x-icon-envelope” data-x-icon=“” style=“font-size:20px”> 문의하기[/caldera_form_modal]

/** caldera modal button **/
button.caldera-forms-modal {
color: white;
background-color: #d65b5b ;
border: 1px solid #d65b5b;
border-radius: 5px 0px 0px 5px;
height: 40px;
width: 137px;
position: fixed;
z-index: 999999;
float: right;
right: -101px;
bottom: 2%;
transition: right 0.3s;
}

button.caldera-forms-modal:hover {
right: 0%
}
/** end **/

[nico]

Hi @divinedh,

Thanks for writing in.

I could see that you have withdrawn the post. Would like to confirm if things work well already.

If still not working well, please share us the specific page that it is not showing well.

Thanks.

[divinedh]

I just deleted my comment but it had withdrawn the post. Can you see it now?

디바인동화

[paul.r]

Hi,

To fix this, kindly do the following.

1. Add the code below in the style field of the Section Element where your modal resides

    z-index: 9999;

2. Add the code below in the style field of the Row Element where your modal resides.

    z-index: 9999;

3. To fix it in IE, try to adjust the width of your button.

button.caldera-forms-modal {
    width:150px !important;
}

Hope that helps.

[divinedh]

@paul.r

z-index: 9999;

Thank you. Its working!
Putting z-index in the field of the row element was a key! And it is now showing properly on IE.

One more thing i would like to ask you is that is it possible to hide this button on an area of hero image and menu. I want it to be seen after it passes the area. ‘hide/show div on scroll’ using jquery might do a trick but im not sure whether its really suitable for this case and i dont know how to apply it to the button.

[basanta]

Hi There,

Thanks again for asking!

This is something need custom coding, which is beyond our theme support scope.
Please take help from a developer to do this.

Thanks for understanding!

[divinedh]

Okay. Thank you for your help!

[basanta]

you are most welcome!