AddThis share layer is not moveable on tablet/mobile

Question

I am using AddThis on a web app that is responsive: PC,Tablet & Mobile.

On PC everything is fine - there is enough space.

On Tablet/Mobile I have an issue - the share layer shows up on the bottom. This is exactly where I have my Bootstrap bottom nav-bar with an important custom button. This causes my important button to be blocked.

I tried:

1. Moving the share layer upwards using "offset" like this:

   'share' : { 'position' : 'right', 'numPreferredServices' : 5, 'offset': {'bottom': '150px'} }

2. Setting my button a very high z-index that exceeds the one of addThis's layer.(z-index: 9999999999;).

None of them worked.

Any ideas what could be done to prevent addThis from blocking my button?

Thanks!

Answer 1

Unfortunately, there isn't an offset property for the mobile toolbar. However, you can position the toolbar at the top of the screen rather than the bottom using the following (notice the layer key is "mobile" not "share"):

addthis.layers({
    share:{},
    mobile:{
        buttonBarPosition: 'top'
    }
});

To offset the toolbar, you can override the css with the following:

.at4m-dock-toggle { bottom:50px !important; }

#at4m-dock { bottom:50px !important; }