Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 20, 2019 at 6:39 pm #1158567
    alexandernoe

    Hi team,
    i found this very cool solution on a homepage made with Enfold AVIA elements
    How can i do this?
    Best regards,
    Alexander

    November 21, 2019 at 7:34 am #1158741
    Rikard

    Hey Alexander,

    It looks like they have added a button to the page, then used this CSS:

    .en_button-float {
    position: fixed!important;
    transform: rotate(-0deg)!important;
    right: calc(-230px)!important;
    top: calc(50% - 48px)!important;
    z-index: 999999 !important;
    transition: 0.3s all ease-in-out!important;
}

    There are no elements in the theme which does that by default unfortunately.

    Best regards,
    Rikard

    January 25, 2020 at 12:21 pm #1178341
    Darebvk

    Hey Rikard,

    An issue appeared on my side while i was trying to follow the instructions you provided above….
    I’m confused why it doesn’t work, please can you test this code, I don’t know if there is any difference, i put the shortcode in the widget area block…
    Take a look :
    1. First option

    <span class="av_font_icon avia_animate_when_visible avia-icon-animate av-icon-style-border en_button-float avia-icon-pos-right avia_start_animation avia_start_delayed_animation" style="color:#fff; border-color:#ed9600; background-color:#ed9600;"><a href="tel:1234567" class="av-icon-char" style="font-size:40px;line-height:30px;width:30px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></a></span>

    2. Second option

    [av_font_icon icon='ue854' font='entypo-fontello' style='border' caption='' size='40px' position='left' color='#edae44' link='manually,tel:1234567' linktarget='' animation='' id='' custom_class='en_button-float' av_uid='' admin_preview_bg=''][/av_font_icon]

    CSS rule:

    .en_button-float { display: none; }
@media only screen and (max-width: 767px) {
.en_button-float { display: block !important; 
visibility: visible !important; 
position: fixed !important; 
text-decoration: none !important; 
text-align: center !important; 
/*left: 10px !important; */
bottom: 50px !important; 
z-index: 9999 !important;
transition: all 0.3s ease-out !important; 
border-radius: 1000px !important; 
}
.en_button-float  .av_font_icon.av-icon-style-border .av-icon-char {
border: none !important;
}
}

    Thanks for your advice
    Best Regards

    January 28, 2020 at 11:43 am #1178964
    Ismael

    Hi,


    @Darebvk    : Can you give us a link to the page containing the button? We would like to check it. What is the exact issue with the code?

    Best regards,
    Ismael

    January 28, 2020 at 12:13 pm #1178977
    Darebvk

    Hey Ismael,
    I made a mistake, I put the code in the footer widget, but i forgot that I set up costumed page for the footer.
    So, that is was problem, it’s not related to theme update.

    Thanks for your engagement

    Regards!

    January 29, 2020 at 12:05 pm #1179368
    Ismael

    Hi,

    Awesome! Glad to know that it’s not an issue with the theme. We’ll close the thread now. Please don’t hesitate to open a new one if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Floating Button to show contact details’ is closed to new replies.