Top header won't change to transparent on mobile

Site URL: http://www.pantryphilosophy.com

I like how it looks on my desktop were the logo is above the background image. 

I tried using this code for mobile:

//MENU HEADER TRANSPARENT ON MOBILE//
@media only screen and (max-width: 640px) {
.Mobile-bar--top {
background: transparent !important;
position: relative;
z-index: 1 !important;
}
}

---It worked at first but now I see no changes. Top header is fixed as the title font gets messed up.

Password: Pantry

Add to Home > Design > Custom CSS

.Mobile-bar.Mobile-bar--top {
    position: absolute;
    background: transparent !important;
    z-index: 999 !important;
    top: 0;
    left: 0;
    width: 100%;
}

For some reason it only affects the bottom of the image block not the top

**EDIT: I can see the original dark color grey as a header but the header image is not showing as background behind the navigation like desktop view. 

Help!

I've tried the above code and a couple others - whilst I get the transparent header for mobile, the padding for the content goes RIDICULOUS ahha. Any fixes? Tried a couple things and it's not changing.

kiandratrickett.squarespace.com

PW Enter

On 12/9/2020 at 6:24 AM, MMEbyKiandraTrickett said:

I've tried the above code and a couple others - whilst I get the transparent header for mobile, the padding for the content goes RIDICULOUS ahha. Any fixes? Tried a couple things and it's not changing.

kiandratrickett.squarespace.com

PW Enter

 

Do you still need help on this?

All good - I can't remember what I did but I did something to fix it!

On 12/23/2020 at 4:04 PM, MMEbyKiandraTrickett said:

All good - I can't remember what I did but I did something to fix it!

I see some pages have very long content on mobile. You can consider adding a back to top button.

Legend - thank you!!