transparent header (mobile)

[Nato0201]

Hey team,

I'm using Ella theme, which has the option to make the header transparent for desktop but not for mobile.

Any help to make my mobile header transparent would be appreciated!

[thirtycoders]

Could you please share your store url.

[Nato0201]

https://ap-perform.com/

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

<style>
@media screen and (max-width: 767px){
#shopify-section-template--22144887259424__16321237356a896dad{
    margin-top: -70px !important;
}
.header-mobile{
    background: transparent !important;
}
}

</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[Nato0201]

That worked perfect! Thank you so much. 

Any chance you'd know how to fix the following:

1. Header bottom outline is still showing - unsure how to remove (see attached image)

2. When I remove the search icon from the header via the header group editor, my logo goes off centre - wanting to re-centre this logo (see attached)

[Nato0201]

I've managed to fix 2 via the editor!

[PageFly-Noah · Accepted solution]

Hi @Nato0201  please add again code here:

<style>
@media screen and (max-width: 767px){
#shopify-section-template--22144887259424__16321237356a896dad{
    margin-top: -70px !important;
}
.header-mobile{
    background: transparent !important;
    box-shadow: none !important;
}
}

</style>

And Iam sorry, currently I have check it show center, You can check it again.
Thank you so much !

[Nato0201]

Absolute legend! Thank you

[Nato0201]

If I wanted to make a product image do the same as my home page (transparent header etc) and fill behind it (see attached example), how would I do this?

[PageFly-Noah]

 Hi @Nato0201 , Sorry i need confirm , You want apply header background  transparent in page product:

Thank you !

[Nato0201]

Correct! Wanting to be able to apply a photo on each product page and have the same effect as my home page if possible.