transparent header

guiguimorning · ‎06-16-2024

hello community ,
ust added the feature of the transparent header in DAWN theme with some coding ( from tutorials ) . it works very well on desktop version but in mobile one no .
the text and colors icone stays in black , putted them in white . ( easy explication ) .
anyone has a solution please? the assistance told me that it needs coding skills and i don't know how to manage that .

Dan-From-Ryviu · ‎06-17-2024

Your logo is hidden by default without my code. But you can solve it by adding this additional code

<style>
@media (max-width: 749px) {
sticky-header { padding-top: 16px !important; }
.shopify-section-header-sticky sticky-header { padding-top: 0px !important; }
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

PageFly-Amelia · ‎06-17-2024

Hi @guiguimorning

This is Amelia at PageFly - Shopify Advanced Page Builder app.

Could you please share the URL link of your store so we can check it for you?

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

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
➜ Weekly updated Shopify tutorials on YouTube

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

guiguimorning · ‎06-17-2024

##-themorningchoice.com -##

Dan-From-Ryviu · ‎06-17-2024

Hi @guiguimorning

Your store is password protected. Please provide the password so I can check and give you solution.

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

guiguimorning · ‎06-17-2024

##- oh sorry, 1907 -##

Dan-From-Ryviu · ‎06-17-2024

Please add this code to theme.liquid file after <head> in Online Store > Themes > Edit code

<style>
@media (max-width: 749px) {
.header__icon, .header__icon--cart .icon { color: #fff !important; }
.shopify-section-header-sticky .header__icon, 
.shopify-section-header-sticky .header__icon--cart .icon { color: #000 !important; }
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

guiguimorning · ‎06-17-2024

Just did it ! Thank you very much 🙏

guiguimorning · ‎06-17-2024

can i ask more one question please , i think no code needed but did not found the solution :
How to center the text menu ( in desktop ) , cause looks like going to left .
thx

Dan-From-Ryviu · ‎06-17-2024

Please add this addition CSS code

<style>
@media (min-width: 990px) {
    .header--middle-left { grid-template-columns: auto auto auto !important; }
    .header--middle-left .header__inline-menu { text-align: center; }
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

guiguimorning · ‎06-17-2024

did it , thx

guiguimorning · ‎06-17-2024

with this code in mobile version , the centred logo beame hidden by the announcement bar

Dan-From-Ryviu · ‎06-17-2024

Your logo is hidden by default without my code. But you can solve it by adding this additional code

<style>
@media (max-width: 749px) {
sticky-header { padding-top: 16px !important; }
.shopify-section-header-sticky sticky-header { padding-top: 0px !important; }
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

transparent header

transparent header

Community Blog Articles