Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #1063418

    i found a website, done with enfold. There is an element that i want to use too.
    Please check the website. you can see the “telefone button” on the right. It is positionend in the center-right.
    When i scroll down, the button moves up to the header and is sticky.

    thank you for helping


    And even that page – allthough it is not yours and not under construction is a secret to put it in private content area?



    That is not part of the theme, they probably used a plugin or custom code to create that.

    Best regards,


    Tja – maybe it is something like this:
    or here with sticky sidebar:


    thank you for the links! That Link with the sticky-button is what i am looking for. How is it done?

    • This reply was modified 6 months, 2 weeks ago by  breezemedia.
    • This reply was modified 6 months, 1 week ago by  breezemedia.

    yes – but that is indeed something totaly different. It is a kind of flyout
    look for flyout plugins:
    i got this – but it is a premium plugin and costs some money:
    if you like the solution with the button on my page – it will be best to have a lifelink from you where you have styled sofar all Elements.
    This sticky technique works with a sticky-wrapper div and a sticky element.


    or we go and have some inspiration:

    just one moment i try to simplify that code a bit. …
    so it might be temporarly not available or not function

    maybe you remove the link now ;) on here

    • This reply was modified 6 months, 2 weeks ago by  Guenni007.

    we now have to look for ipad view – because fixed positioning is always a problem on those mobile devices.


    ok here we go:
    ( i styled it here only for my page with ID: 2466 – if you want to have it everywhere – remove the if clause – but don’t forget to delete the last but one closing curly bracket then too!)
    it is recomended to use a child-theme
    both comes to child-theme functions.php

    first : the container itself placement

    add_action('ava_main_header', function() {
    echo '<div class="fixed-tel">
            <a id="klick" class="telephone" href="tel:+492289768293">
                <span class="phone-icon">+49 228 9768293</span>   

    Second: the function for animation:

    add_action( 'wp_footer', 'fixed_contact_script' );
    function fixed_contact_script() {
    <script type="text/javascript">
            if($(document).scrollTop() > 10){
                if($('.fixed-tel').data('size') == 'big')
                if($('.fixed-tel').data('size') == 'small')

    this comes to quick css:

    .fixed-tel {
        top: 50%;
        right: -165px;
        position: fixed;
        z-index: 10;
        background-color: #1ecaed;
        border: 2px solid #fff;
        border-right: none !important;
    #klick { padding: 20px; display: block }
    .phone-icon::before {
        content: "\e854";
        font-family: entypo-fontello;
        padding-right: 18px;
        font-size: 30px;
        top: 3px;
        position: relative;
    .fixed-tel:hover { right: 0 !important }
    .fixed-tel a:hover { text-decoration: none }
    .telephone { color: #fff !important }

    if you don’t like the hidden part of that telephone field – just set the right positioning to 0 – and remove css for fixed-tel:hover)
    if you like to link to your contact page just change href in: echo '<a class="telephone" href="tel:+492289768293"> and adapt the content ( maybe the icon to: \e805 )
    if you like to have that phone field over the slided in hamburger menu – set the z-index to 1000
    some positioning depends on your header height ( and if you have f.e. top bar etc.

    Result as mentioned above see here:


    hey Günni, großartig dass du das so probierst und erarbeitest.

    Das funktioniert perfekt!!!!!!!!!

    • This reply was modified 6 months, 1 week ago by  breezemedia.
    • This reply was modified 6 months, 1 week ago by  breezemedia.

    danke – nimm den link noch hier weg: Referenzseite



    @breezemedia: Glad it worked!

    Thanks @guenni007. Happy Valentine’s Day to you and your wife. :)

    Best regards,


    Thank you – also for the reminder.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.