Setting a top margin for a sticky menu navigation on mobile

Hi,

on mobile I have an AddThis sharing bar that is displayed at the very top of the viewport. It measures 40 pixels in height.

In order for that bar not to sit over or conflict with the navigation menu I have
.mobile-header-navigation {margin-top: 40px;}
applied, which works great. The AddThis bar is displayed first, then the mobile menu precisely after, and then the content.

Now I would like to enable sticky menu on mobile but I need the navigation to never move under the AddThis bar, which remains fixed at the top always.

I have tried the following code, which I found in this thread

/* Mobile sticky nav position */
#mobile-header.is_stuck {
  top: 40px !important;
}

It almost works but not quite... During the first 40 pixels of a scroll down the menu will move under the AddThis bar until it reaches its 'sticky' status, at which point it moves back to its correct location (40px from the top), below the bar.

How can I make sure the mobile menu never moves within the first top 40px of the screen? Easy solution would be to move the AddThis bar to the bottom of the viewport but that space is reserved for ads so I can't do that...