Positioning a floating button

  • Resolved bibber

    (@bibber)


    7 years, 5 months ago

    I want the button positioned on a fixed place on the website – and I don’t want it to scroll vertically. I managed to do this by choosing floating, using the position and offset variables in settings ( 300 pixel from top and 650 pixel from right) and then adding css: .a2a_floating_style { position: absolute !important;}

    But this seems to make a fixed coordinate, so when the window is reduced or on a smaller screen the button does not move relatively – and is shown eg in the middle of the page.

    Can this be solved?

    Help will be much aprreciated.

    url: https://www.bioguldborgsund.dk/udvikling/velkommen/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter bibber

    (@bibber)

    Through the developer tool in Chrome I’ve found out, that indcation position in % instead of pixels makes the thing. But can’t get the css to work:

    What I changed in the dev.tool:
    element.style {
    right: 40%;
    top: 80%;
    line-height: 24px;
    }
    So I tried with this: .a2a_kit.a2a_kit_size_24.a2a_floating_style.a2a_vertical_style {
    right: 40%;
    top: 80%;
    line-height: 24px;
    }

    but it doesn’t work….
    help will still be much appreciated.
    Best regards

    Plugin Author micropat

    (@micropat)

    From “How can I position a vertical floating share buttons bar relative to content?” in the plugin’s FAQ:

    In settings, disable the default placement of the Vertical Buttons. In your theme’s file(s), find the parent element that you want to position the vertical bar to (the parent element should have a specified width), then add the following example PHP code as a child of that parent element:

    <?php if ( function_exists( 'ADDTOANY_SHARE_SAVE_FLOATING' ) ) {
    ADDTOANY_SHARE_SAVE_FLOATING( array(
        'kit_style' => 'margin-left:-100px; top:150px;',
        'vertical_type' => true,
    ) );
} ?>

    Remove your current custom CSS, then place the following PHP code inside your theme’s <section id="container" class="one-column"> tag:

    <?php if ( function_exists( 'ADDTOANY_SHARE_SAVE_FLOATING' ) ) {
    ADDTOANY_SHARE_SAVE_FLOATING( array(
        'kit_style' => 'margin-left:calc(100% - 200px); top:150px;',
        'vertical_type' => true,
    ) );
} ?>
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Positioning a floating button’ is closed to new replies.