[Support request] z-index – Move Lightweight Social Icons to float behind footer

Home Forums Support [Support request] z-index – Move Lightweight Social Icons to float behind footer

Home Forums Support z-index – Move Lightweight Social Icons to float behind footer

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #591127
    Eva

    I am using Tom’s Lightweight Social Icons and have turned them into a floating bar on the right hand side of my web pages. However, as you scroll down to the end of the page, I would like the floating social icons to go underneath the footer background area instead of on top of it. How can I do that? Below are my code:

    /* STYLIZE LIGHTWEIGHT SOCIAL ICONS */
    #lsi_widget-2 .lsi-social-icons {
    background: transparent;
    position: fixed;
    bottom: 15px;
    right: 35px;
    left: auto;
    width: 50px;
    height: auto;
    display: block;
    z-index: 900;
    }

    #lsi_widget-2 .icon-set-lsi_widget-2 a {
    background: transparent !important;
    }

    /* MOVE FOOTER TO BE ON TOP OF LSI */
    .footer-widgets {
    z-index: 999;
    }

    Thanks for your help. 🙂

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #591154
    Tom
    Lead Developer
    Lead Developer

    I’m not sure this is possible as the widget is inside of the footer.

    You would need to insert the icons outside of the footer element in order of us to tweak the z-index and have them display behind the footer.

    #591176
    Eva

    I see.

    I’ve registered a pre-footer widget and placed my floating social bar there instead. Does this help? It’s still not working though. I’m not sure how to tweak my CSS and there is now a dot inside the pre-footer widget I can’t seem to get rid of. Pls help, thanks Tom.

    #591182
    Eva

    FYI this is my code for registering the pre-footer widget:

    add_action( ‘widgets_init’, ‘tu_full_width_widget’ );
    function tu_full_width_widget() {
    register_sidebar( array(
    ‘name’ => __( ‘Full Width’, ‘theme-slug’ ),
    ‘id’ => ‘full-width’,
    ‘description’ => __( ‘Widgets in this area will be shown on all posts and pages.’, ‘theme-slug’ ),
    ‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
    ‘after_widget’ => ‘‘,
    ‘before_title’ => ‘<h2 class=”widgettitle”>’,
    ‘after_title’ => ‘</h2>’,
    ) );
    }

    add_action( ‘generate_before_footer’, ‘tu_add_full_width_widget_area’, 100 );
    function tu_add_full_width_widget_area() {
    if ( is_active_sidebar( ‘full-width’ ) ) : ?>

    <?php dynamic_sidebar( ‘full-width’ ); ?>

    <?php endif;
    }

    #591655
    Eva

    Hi! Pls ignore my last two messages. It’s almost working now. I’ve created a pre-footer widget for the floating social icons and now need to play around with z-index to make it work perfectly.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.