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

    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

    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

    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,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.