Prestige Theme Transparent Header Hover

RASROWEN
Excursionist
24 2 1

Hi, 

 

I have just updated the Prestige theme.

 

I previously was given a code for a transparent header for scrolling and hovering on all pages, however, it's not working with that code on the new update. 

 

Can anyone assist? 

 

 

Replies 9 (9)

PageFly-Noah
Globetrotter
561 130 137

Hi @RASROWEN 

 

This is Noah from PageFly - Shopify Page Builder App

 

Please re-add the code you was given to your new theme, its seems the new theme haven't had the code like the old theme yet, that's why it's not working 

Or you can add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
x-header.header.is-solid {
    background: transparent !important;
}
.Header {
    background: transparent !important;
}
</style>

PageFlyNoah_0-1694564749468.png

 

 

Hope this can help you solve 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.

RASROWEN
Excursionist
24 2 1

Hey, thanks for your response. 

 

It works for scrolling but not hovering. 

 

Please find the link for the page: https://c64jantjt7thuygj-24956502104.shopifypreview.com

PageFly-Noah
Globetrotter
561 130 137

Please replace the code above with this new one

<style>
x-header.header.is-solid {
    background: transparent !important;
color:#fff;
border-bottom: 1px #fff solid;
}
.Header {
    background: transparent !important;
}
#shopify-section-sections--16118615179455__header {
--header-logo-height: 80px !important;
}
</style>

PageFlyNoah_0-1694565792025.png

 

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.

RASROWEN
Excursionist
24 2 1

Hey, that didn't work! It remained solid on hover and it changed the logo image and header proportions 

RASROWEN
Excursionist
24 2 1
PageFly-Noah
Globetrotter
561 130 137

Can you let me know how exactly you want it to be?

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.

Dan-From-Ryviu
Shopify Partner
6962 1318 1342

Hi @RASROWEN 

Please add this code before </head> tag in your theme.liquid file to make your header transparent 

<style>
.header { background: transparent !important; } 
</style>

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

RASROWEN
Excursionist
24 2 1

Hey, thanks for your help! 

 

It's working well. Can we make the writing stay white by any chance? 

 

Updated preview: https://c64jantjt7thuygj-24956502104.shopifypreview.com

Dan-From-Ryviu
Shopify Partner
6962 1318 1342

Hi there, 

 

Please add more this code 

<style>
.header__logo-image--transparent { opacity: 1 !important; }
.header { background: transparent !important; } 
.header,
.localization-toggle { color: fff !important; }
</style>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now