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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

transparent header

transparent header

Community Blog Articles