I believe, on devices with smaller widths, wpadminbar is not positioned fixed. So if you scroll the document in a smartphone, the admin bar will follow the scroll and will not stay at the top of the window. With keeping this in mind, why not add some javascript in the footer of your theme just after the wp_head()
call. This way we can target the device width and whether or not the document has the adminbar. Then simply make some CSS rules and append it to the document head - like below!
<script>
( function(e) {
var ab = document.getElementById( 'wpadminbar' );
if ( typeof( ab ) === 'object' && window.innerWidth >= 610 ) {
var abh = ab.offsetHeight || ab.clientHeight || ab.scrollHeight;
var style = document.createElement( 'style' );
style.id = 'adminbar_main_nav_controle_rules';
document.getElementsByTagName( 'head' )[0].appendChild( style );
var rules = document.createTextNode( 'body.admin-bar .main-navigation.fixed { margin-top: ' + abh + 'px !important; }' );
style.appendChild( rules );
console.debug( 'wpadmibar space is covered' );
}
})();
</script>
Assuming your nav has a class 'main-navigation'
and on scroll you add another class named 'fixed'
to it. Change the CSS to target your navigation panel by replacing 'body.admin-bar .main-navigation.fixed'
with howsoever you would want to target yours.
It can be further improved for example checking if the admin bar is fixed or not, but for now, I hope it will helps.