How can I make the header transparent for mobile?

That's not a feature that is directly available in our themes, and because of how the transparent header works (absolute positioning that overlaps the content) it doesn't really function how you might imagine.

Even still, if you want to try it or modify the custom code for that, here it is:

@media (max-width:767px) {
	header.banner:not(.headhesive--clone) {
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
		overflow: visible !important;
		z-index: 9998;
		background-color:transparent;
	}
}

Custom CSS can be added into your child theme, or under Appearance > Customize > Additional CSS.

It's not 100% ready yet but you can try to play around with it.