Floating Social slides under header

1. I've installed the Floating Social bar on one of my sites: http://barsandbartending.com/bartending-tips/
and, as you can see, the Floating Social bar ducks underneath the header instead of coming overtop. I've tried many ways to fix this and now I'm at a loss. Is there a way?

2. I'd like to have either no background (transparent) or to decrease the size of the background.

Cheers!

  • Alexander
    • DEV MAN’s Mascot

    Hi @reese_richards,

    This is because your theme uses z-index, which allows for depth sorting of elements on the page. There are a few solutions here.

    1. We can move the floating social bar down the page. I'd recommend this because then the bar won't be in the header.

    In your dashboard, from "Settings -> Floating Social" Take a look at the "Top Offset" settings.

    150px is the default, but it usually needs to be adjusted depending on the theme.

    I'd recommend increasing this until the top of the floating social bar rests just under the header. To start you can try 250px and play with it from there.

    2. We can add z-index to the bar, and have it show on top.

    On the settings page for Floating Social, head to the "Advanced" section, and try setting the z-index to -1000000

    Let me know how it goes!

    Best regards,

  • reese_richards
    • WPMU DEV Initiate

    Thanks for the suggestions. I actually tried both of those before and these were my results:

    1. It worked but somehow the floating social bar on my homepage disappeared when I made this change (even tho the 'show on homepage' is selected)

    2. I had a Fiverr guy try to fix the issue and he set this to 1 Mil or something and it wreaked havoc on my site layout; things like the content box and header.

    I have re-implemented your 1st suggestion as I'd rather have the social bar look good on all my pages and not be on my homepage than look bad on every page.

    Do you know if there's a way to create a transparent background?

    Thanks!

  • Alexander
    • DEV MAN’s Mascot

    Hi @reese_richards,

    For the first option, try settings a higher value, maybe like 400px? Because your theme is partially responsive, the header height changes - so it looks different depending on your screen size. I've found 400 to be the best value for all screen sizes.

    It's not easy to just make the header transparent. Doing this makes other backgroun colors bleed through from other elements of the site. For example, for some reason your body has a background color of grey.

    If you really want it to overlap the header, you can apply this CSS:

    #header {
    position:static;
    }

    That will change the header position context to something that's compatible with z-index.

    Best regards,

  • reese_richards
    • WPMU DEV Initiate

    I'm satisfied with how it looks on my inner pages but it still isn't showing on my homepage (yes, the box is checked).

    If it's not possible to make the floating social background transparent, is it possible to decrease the width of the background?

    Cheers,

    Reese

  • Alexander
    • DEV MAN’s Mascot

    Hi @reese_richards,

    I thought you were referring to the header background (which has many layers...) You can make the Floating Social box transparent with this CSS rule:

    #wdsb-share-box {
    background-color: transparent !important;
    }

    That will even override the dynamically set color.

    Best regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.