Archived topic
z-index - Move Lightweight Social Icons to float behind footer
4 replies · Started by Eva on June 3, 2018
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. :)
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.
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.
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 endif;
}
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.
