Transparent header without using code injection

I'm trying to make my header transparent but can only manage to make it transparent lower on the page or when scrolling - when landing on the page or when page is scrolled to the top, the header is solid. See screenshots below, first one is on the homepage before scrolling, second one is the homepage after scrolling down. The second one is how I want it to be.

The header is Fixed>Basic and with the following settings:

With help from this forum, I managed to do this with the following code injected into the header settings of the homepage:
 

<style>

.page-section.gallery-section{padding-top:0px!important;}

</style>

However, that piece of code + the code for making the burger menu only works as injection, and I'm on the personal plan. Since I have no other reasons to switch to the business plan, I'm trying to find a way to do it with other means, only using settings and/or CSS.

Any ideas?