Fixed Top Bar - Pushing Down Body

I'm trying to figure out the best way to use a Hook to create a fixed mobile top-bar.

I can't seem to get the body to push down properly.

SO far I've landed on this:

@media only screen and (max-width: 768px)
{
body::before
{
display:block;
content: '';
height:50px;
}
}

.app-top-bar
{
position: fixed;
top: 0;
left: 0;
display:block;
height: 50px;
width: 100%;
z-index: 9999999999999999;
}

Any other ways around this?