Disable/hide site header/mobile header on mobile

[Jason]

I am using custom HTML navigation in top bar set to bottom:0px in mobile and wish to remove the header on mobile. I have tried
.site-header {display: none !important;}
within a media query and it doesn’t seem to work.
If I change the setting to mobile header I can use css similar to above to make it disappear, however once I scroll down and back up the sticky nav reappears once again.
I wish to keep the sticky/hide until scrolling up for desktop.
How can I achieve this (probably really simple I’m guessing)?
I ultimately want to only display my custom nav menu for mobile.

[Author]

Posts