Remove header only on mobile with custom CSS?

I'm using the Five Template, and I'm having all kinds of problems with my custom header in mobile. Help referred me here and said custom CSS could fix my issue. I know nothing of web design so that's why I'm here.

Is there a way to disable the header all together for my mobile version only? That way I'll only have the Nav Bar at the top?

First, see this article on how to use the CSS Editor on your site: https://help.squarespace.com/guides/using-the-css-editor.

Then, simply add this line to the Editor:

@media only screen and (max-width: 640px) { 
    #banner-area-wrapper {display: none;}
}

Note: the max-width property can be adjusted higher if you want to disable the header for tablet sizes as well - typically you'd set it to 1024px instead of 640px.

Thank you so much! Worked perfect!

How could this be done for the Supply template? This code doesn't seem to work.

Could you post a link to your site?

Thanks I'm trying to do this for Avenue. My URL is https://jamie-stoneham-z906.squarespace.com/config#/design|/coffee-1/

I tried to inspect the element and find what section it was in and used the code:@media only screen and (max-width: 640px){ #extra-wrapper page-header {display: none;}}

but that didn't seem to work as well as #banner-area-wrapper. Please let me know what I am doing wrong. Thanks!

Thanks I'm trying to do this for Avenue. My URL is https://jamie-stoneham-z906.squarespace.com/config#/design|/coffee-1/

I tried to inspect the element and find what section it was in and used the code:@media only screen and (max-width: 640px){ #extra-wrapper page-header {display: none;}}

but that didn't seem to work as well as #banner-area-wrapper. Please let me know what I am doing wrong. Thanks!