Hide hovering homepage thumbnail + hamburger menu on mobile

Hi there,

I am setting up a blog page that I want to be a standalone entity that doesn't include the navigation bar and header thumbnail that typically appear on my website. 

I have been able to successfully hide these elements by adding the following code in Settings > Advanced > Page Header Code Injection:

<style>header, footer, mobile-bar {display:none !important; }
</style>

But when I visit the page on mobile, the elements return. Is there a modified version of the code that will successfully hide them on this blog page (without making them disappear from the other pages on my website)?

Thanks for your help!

Sorry — should have added: you can view the blog page in draft form at ericmutrie.com/advent

And the rest of my site for context lives at ericmutrie.com

Thanks again!

Adjust your page code injection:

<style>
  header, footer, .mobile-bar-wrapper {display:none !important;}
</style>

@Ziggy Thank you! That works perfectly.