Solved

transparent header (mobile)

Nato0201
Excursionist
49 0 4

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!

Accepted Solution (1)
PageFly-Noah
Astronaut
1110 199 218

This is an 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>

PageFlyNoah_0-1714815538999.png

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

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 10 (10)

thirtycoders
Shopify Partner
108 19 24

Could you please share your store url.

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
Nato0201
Excursionist
49 0 4

PageFly-Noah
Astronaut
1110 199 218

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Nato0201
Excursionist
49 0 4

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)Screen Shot 2024-05-04 at 10.27.14 AM.pngScreen Shot 2024-05-04 at 10.27.27 AM.pngScreen Shot 2024-05-04 at 10.27.44 AM.png

Nato0201
Excursionist
49 0 4

I've managed to fix 2 via the editor!

PageFly-Noah
Astronaut
1110 199 218

This is an 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>

PageFlyNoah_0-1714815538999.png

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

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Nato0201
Excursionist
49 0 4

Absolute legend! Thank you

Nato0201
Excursionist
49 0 4

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?Screen Shot 2024-05-05 at 9.42.47 AM.png

PageFly-Noah
Astronaut
1110 199 218

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

PageFlyNoah_0-1714969068753.png

Thank you !

 

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Nato0201
Excursionist
49 0 4

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